1.P: Frontend App
Build an app that solves a problem you have using HTML, React and CSS. We will not be able to persist data until Module 2, but there are still many useful apps we can build.
- 1.HTML, CSS and React with Create React App
- 2.Interactivity, e.g. at least 1 input or button that changes app state
- 3.At least 2 levels of components, e.g.
Appcomponent and 1 or more child components at least 1 level below it - 4.
- 5.Responsive layout that is user-friendly on mobile and desktop views
- 2.
- 3.Git commits for each feature with descriptive commit messages
- 4.App description in README with user stories and low-fidelity wireframes
- 5.Instructions in README to run app
The best ideas are ones that solve our own problems. Since we cannot persist data until Module 2, consider apps that do not require us to store data beyond the current session. For example: games, calculators, guitar tuners, colour matchers, visualisers. Games may be the most engaging to implement because they typically require more logic. Consult your section leader if you are struggling to decide on an idea.
You will have roughly 8 course days to complete this project. We will observe the following timeline to keep us on track.
Project Day | Checkpoint | Feedback |
|---|---|---|
0 | Ideation phase 1 Post project ideas in Slack for feedback | SL to review ideas and share feedback |
1 | Ideation phase 2
Create planning docs: user stories, wireframes, kanban board | SL to review planning docs and share feedback |
2 | Start implementation | - |
3 | - | - |
4 | - | - |
5 | MVP deadline
Users can complete the primary user story | SL to review code in GitHub, share feedback |
6 | - | - |
7 | Feature freeze No new features, focus on polishing existing features and code to be presentable | SL to review progress and share post-feature-freeze suggestions |
8 | - | - |
9 | Project presentations Practise explaining your work to others. Other batches will join and we will celebrate each others' hard work. | |
10 | |
Rocket recommends the following project management strategies and tools for all projects.
Start with user stories. Who is our user and what is their job to be done? Be as specific as possible. After we articulate user stories we can proceed to design our app.
Example user stories for Project 1:
- An interior designer wants to determine whether 2 or more colours match and what an optimal colour palette might be for given a base colour
- A daily commuter wishes to play Flappy Bird during his 30-minute commute
- A couple wishes to play a game of checkers against each other on their shared computer
Above user stories may not require persisting user data beyond the current session. From Project 2 onward we will learn how to persist user data for multiple users accessing our apps at multiple times on different devices.
After user stories, create simple wireframes to visually describe how users accomplish user stories with our app. Connect wireframes to form user flows for each user story. Only include what is needed to accomplish user stories, no more and no less. Rocket recommends Figma, a relatively simple and popular design tool.
Here is an introduction to wireframing with Figma. Rocket recommends only low-fidelity wireframes for our projects due to limited time. Below are example wireframes by Figma; we can create user flows by navigating to the Prototype tab in the right sidebar and adding connections between wireframes.
Example wireframes by Figma
After user stories and wireframes, Rocket recommends using a kanban board to track implementation progress. A kanban board is a progress-tracking board that contains broadly 3 lists of tasks: To Do, Doing and Done. Rocket recommends Trello for its simplicity, and the Trello Engineering Kanban Template for its relevance to SWE.
Each task on your board should take no more than 1 day to complete. If you think it will take longer than 1 day, break it down into smaller tasks. This will help you stay motivated and track progress more accurately. Move in-progress tasks to the Doing lists and completed tasks to Done.
Start by forking Rocket's Bootcamp Project 1 repo that contains an empty CRA app. This will make it easier for SLs to review your code by allowing us to submit projects via pull requests.
Rocket recommends deploying to GitHub Pages as per Create React App official docs because we are already using GitHub for code hosting.
- 1.Submit a pull request to Rocket's Project 1 repo
- 2.Add your Project 1 repo link to the Rocket Bootcamp Projects spreadsheet in your batch-specific sheet. Feel free to review past student projects in previous batches' sheets.
Rocket recommends designing and building the mobile version of your project before the desktop version. It will be easier to add features to a UI for the desktop version than to remove features from a UI for the mobile version. Use Chrome DevTools to simulate smaller devices in Chrome.
Leave sufficient time to polish your app to be presentable. Fewer, more-polished features are generally better than more, less-polished features. Below is a sample checklist to run through.
- 1.Are there obvious bugs?
- 2.Are variable names concise and precise?
- 3.Do we have JSDoc comments above major functions and inline comments above code that could be confusing to others?
- 4.Is each function sufficiently small and modular to be easily readable?
- 5.Is the visual design clean?
- 6.Is the app layout responsive?
- 7.Did we update the app favicon and page title?
- 8.Did we populate the README?
Last modified 1yr ago