Version control

Set up the folder you created previously to be a Git repository. Push the initial files to a repository on GitHub. You should be consistently committing your changes throughout the project. Make sure to have meaningful commit messages.

To initialize your Git repository, you can run the below code in your terminal, where application is the name of your project folder.

git init application

Visualize your end result. What is it built with? What can it do? Make sure that it satisfies all of the project objectives.

Make a timeline for yourself and avoid the temptation to build things that aren’t required. Setting firm boundaries and deadlines will keep you on track and prevent scope creep.

The following tasks will help you identify natural break points.

Wireframe your application

Using pencil and paper, or a wireframing software of your choice, draft what you’d like your application to look like.

Think about what the main components of the site will be and how you would like to see them arranged on the page. You should also think about the user flow and design all of those states and transitions as well. Don’t forget about error states!

You should also think about:

• The application’s color palette
• How to break up your design into components
• How your application will look at different screen sizes

Create files and run it locally

On your computer, create the files needed for your React application. Run your application locally to see what it looks like in the browser.

You can use create-react-app to start your React application. If you want to set up Redux automatically, you can use the Redux flag.

Optimize your app

Test your application on Lighthouse. Improve your app until it gets a score of 90 or higher.

Make sure your app is accessible, quick to load, and uses SEO best practices.

Project Requirements:

• Build the application using React and Redux

• Version control your application with Git and host the repository on GitHub

• Use a project management tool (GitHub Projects, Trello, etc.) to plan your work

• Write a README (using Markdown) that documents your project including:

  • Wireframes
  • Technologies used
  • Features
  • Future work

• Write unit tests for your components

• Write end-to-end tests for your application

• Users can use the application on any device (desktop to mobile)

• Users can use the application on any modern browser

• Users can access your application at a URL

  • This means your application should be hosted online

• Users are delighted with a cohesive design system

• Users are delighted with animations and transitions

• Users are able to leave an error states

  • Think about bad API calls, network failures. When an event like that happens, your app shouldn’t crash but provide a user a means to get back to a working state (retry button, go back button, etc.)

• Get 90+ scores on Lighthouse

• OPTIONAL: Get a custom domain name and use it for your application

• OPTIONAL: Set up a CI/CD workflow to automatically deploy your application when the master branch in the repository changes

• OPTIONAL: Make your application a progressive web app

Build the application

Based on your wireframes, start building your application with fake, local data. Remember to build reusable components and to keep your components small.

Other things to keep in mind:

• Your application should work for all screen sizes
• You are welcome to use libraries to help you accomplish features
• You should write unit tests and end-to-end tests where it makes sense

Publish to the web

Congratulations on building your application! Deploy what you’ve built and share it with the world!

There are many ways to deploy your application online. You deploy it with GitHub pages, Netlify or choose your own option.

Next steps

Go back to the project requirements section and complete the optional requirements.

Connect to real data

If using an API, connect your application to it.

When interacting with the API, don’t forget to handle error states.