Project
Introduction
For the project for Web Development 2, you will create a web application from scratch over a four-week period. You are encouraged to create a useful and meaningful web application that addresses a real-life problem, so that you can keep it running after the completion of the course and have it in your portfolio.
You will be responsible for the entire development process, from idea generation to deployment. It is recommended to use the agile development methodology, which means working in three short sprints of 1 week each.
The project consists of three phases:
| Phase | Description |
|---|---|
| Phase 1 | Project Selection, Planning, and Design |
| Phase 2 | Project Development and Implementation |
| - | Sprint 1 |
| - | Sprint 2 |
| - | Sprint 3 |
| Phase 3 | Project Deployment |
| - | Self-Reflection |
| - | Showcase |
Phase 1: Project selection, planning, and design
For this phase, you have three big choices to make for your project.
1. Individual or Group
Individual Projects: Working individually gives you complete control over the project. You are responsible for every aspect of the application, from ideation to deployment. This can be a great opportunity to challenge yourself and showcase your ability to work independently.
Group Projects: Working in a group allows you to share the workload, learn from each other, and experience working as part of a team. It's a great way to understand how to collaborate effectively, a key skill in the professional world. However, remember that successful group work requires clear communication, shared responsibilities, and mutual respect among all members.
Group projects should show a greater scope or depth to account for the combined efforts of the group members. For example, a group project could be a more complex application, or a more polished version of an individual project.
Please make your choice considering your comfort level, learning goals, and the project's requirements. Remember, the ultimate goal is to learn and create a web application that you're proud to showcase.
2. Technologies
You are free to choose any technologies to work with within the Next.js framework. Here are the recommended technology levels based on the content covered in this course:
| Level | Weeks Covered | Description |
|---|---|---|
| Starter | 1 - 4 | At the very least, your web app must be interactive. |
| Intermediate | 1 - 7 | Fetch data from an external API and display it. Recommended level for most students. |
| Advanced | 1 - 10 | If you're up for a more comprehensive challenge, consider implementing authentication, a database, and/or the use of any additional libraries into your web application. Libraries can be used to add extra functionality, handle complex tasks, or improve your development process. |
| Expert | 1 - 11 | For those aiming for an in-depth understanding, aim to build a full-stack application with a RESTful API backend. |
For the user interface, you can choose from several options: pure CSS, Tailwind CSS, Tailwind CSS component libraries, or other component libraries.
It's crucial to select the right technology level for your project, one that aligns with both your current skills and your learning aspirations. While it's exciting to explore advanced concepts and stretch your abilities, remember that the ultimate goal is a successful, functioning project that you can be proud of. Consider the complexity and feasibility of your idea, your familiarity with the technologies, the time frame, and your capability to tackle challenges that might arise. It's perfectly okay to start at a comfortable level and gradually incorporate more advanced features as you gain confidence and expertise. The journey of learning and development is just as important as the end product. I want you to enjoy this project!
3. Project Idea
Your project idea should be something you are interested in and motivated to develop! Keep in mind that your project idea and scope will be shaped by your choice of working individually or in a group, as well as the technologies you choose to use. Here are some project ideas for each technology level:
Starter Level: At this level, projects should focus on interactivity and user engagement. Ideas include:
- Quiz application: Users answer a series of questions and get a score at the end.
- Personal portfolio: Showcase your work, skills, and background.
Intermediate Level: At this level, your application should interact with an external API. Some ideas could be:
- Weather application: Fetch weather data from an API and display it based on the user's location or a location they input.
- News application: Fetch news from an API and display the latest news or news based on a specific category.
- Movie database: Fetch data from a movie API and allow users to browse different movies.
- Email anonymizer: Allow users to send emails without revealing their email addresses.
- More ideas? Peruse the public APIs (opens in a new tab) repository on GitHub for inspiration.
Advanced Level : For this level, consider creating an application that involves user authentication, a database, and additional libraries. Here are a few ideas:
- Todo list with user accounts: Users can create an account, log in, and manage their own todo lists.
- Recipe sharing platform: Authenticated users can share their own recipes, browse, and comment on other users' recipes.
- Book review platform: Users can browse books, write reviews, and read reviews written by other users.
Expert Level: At this level, aim to build a Full RESTful API backend. Some project ideas could include:
- E-commerce store: Users can browse products, add them to a cart, and checkout. Admin users can add, edit, or remove products.
- Social networking site: Users can create profiles, post updates, follow other users, and interact with their posts.
- Project management tool: Users can create projects, add tasks, assign tasks to team members, and track progress.
These are just a few examples, and you're welcome to come up with your own unique project idea. The most important thing is that your project is something you're excited about and interested in building. The more engaged you are with your project, the more you'll learn and the better your final product will be.
This course is designed to introduce you to web application development, not to build a massive, complex project—that's what your capstone course next semester is for! While I encourage creativity, it's crucial to keep your project manageable and focused on demonstrating your understanding of the technologies we're covering. A well-executed simple project is better than an overly ambitious one that remains unfinished. So, let's save those larger project ideas for your capstone course and concentrate on building a successful, feasible application right now!
Project Setup: Next.js, GitHub, and Vercel
After you've solidified your project idea, it's time to set up your development environment. This process involves creating a Next.js project, establishing a GitHub repository, and deploying your application via Vercel. You may find it helpful to review the following guides:
If you're working in a group, add all group members as collaborators to your GitHub repository. You can do this by navigating to the repository settings on GitHub, selecting "Collaborators", and adding your group members' GitHub usernames.
Continuous Integration/Deployment
I highly encourage you to adopt a Continuous Integration/Continuous Deployment (CI/CD) workflow. This means that every change you push to your GitHub repository will automatically be deployed to Vercel, keeping your live application up-to-date with your latest changes. Each sprint in your project development process should result in a successful deployment. This ensures that you maintain a working version of your application at all times, allowing you to catch and address issues early.
Submission Instructions
Email the Instructor at the following address: olusola.akinbode@sait.ca. In your email, please make the subject "WebDev Project" and include the following details in the body of the email.
If you are working within a group, please only do one email per group.
In the body, include the following information:
- Group: Yes/No :If you are working within a group, the names, GitHub usernames, and role of your group members
- Name: Name of your web app
- Github: GitHub username and GitHub repository for your project
- URL: The URL of your deployed web app
- Description: A description of your project idea, including the problem you are trying to solve, the target audience, and the technologies you plan to use
- Development Plan: The development and implementation plan for each sprint
- Architectural description: An architectural description of your web app, including a list of the different pages and components