A simple project with all the Must-Have features I'd like to add to any React project.

Previously just a React exercise that:

• Implement an autocomplete box with a list of results.
• Use the Star Wars API to search for planets.
• When the user hits on one result, this selection should be placed at the bottom as a list.
• The user has to be able to select as many items as he wants.
• You can not choose a planet if it was previously selected.
• The user can delete the selection by clicking on a button on each item of the list.
• Use Context API.

• React: A JavaScript library for building user interfaces.

• Create React App: Set up a modern web app by running one command.

• prop-types: Runtime type checking for React props and similar objects.

• Star Wars API: All the Star Wars data you've ever wanted: Planets, Spaceships, Vehicles, People, Films and Species.

• MUI React UI framework: The React UI library you always wanted.

  • TransitionGroup: To animate a component when it is mounted or unmounted.

• semantic-release: semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes, and publishing the package.

• ESLint: Find and fix problems in your JavaScript code.

• Airbnb JavaScript Style Guide: A mostly reasonable approach to React and JSX.

• Prettier: An opinionated code formatter.

• husky: Husky improves your commits and more 🐶 woof! Used to run Prettier and Linter before every commit.

• HTML5 Boilerplate: The web’s most popular front-end template.

• The Real FavIcon Generator: Favicon Generator. For real. All browsers. All platforms. Your favorite technologies.

• All Social Media Tags: Must-Have Social Meta Tags for Twitter, Google, Facebook, & More.

• CDN: For this project used Bunny.Net: The content delivery platform that truly hops.

• Hosting: For this project used GitHub Pages with gh-pages: Publish files to a gh-pages branch on GitHub (or any other branch anywhere else).

• Migrate from Create React App to ViteJS

• Keep repo package dependencies up to date

• React Query: Performant and powerful data synchronization for React Fetch, cache and update data in your React and React Native applications all without touching any “global state”.

• Testing Library: Simple and complete testing utilities that encourage good testing practices.

• Schema Validation: When developing a client app it is important to validate the data that comes in.

• React Router: React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. Additional pages to add:

  • 404 Error
  • Maintenance

• Core Web Vitals: Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve. Additional pages to validate:

  • Google Web Vitals best practices for single-page apps
  • Optimizing Core Web Vitals on a Next.js app

• StoryBook: Build component driven UIs faster — Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing and documentation.

• Accessibility: Focus management in React, which can improve usability and reduce confusion for both keyboard-only and screenreader users.

• Error Handling and Logging: Front-end developers often overlook error handling and logging. However, if any code segment throws an error, you must handle it correctly. Besides, depending on the situation, there are several ways to manage and log errors in React.

• The Front-End Checklist: The Front-End Checklist Application is perfect for modern websites and meticulous developers!

• Logo: png 🥚 egg

• Icon: Starwars Icon Set by Sherzod Mirzaakhmedov

• Font: Star Jedi Font by Boba Fonts

• Wallpaper: Pinterest

• Planets Images: Wookieepedia

• Small Icons: Simple Small Icons by icons8

In the project directory, you can run:

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Run Prettier script and fix code with eslint rules previously to a Pull Request.

Publish build files to project GitHub Page.

Previous do a pull origin to get the latest commits.

Launches the test runner in the interactive watch mode. See the section about running tests for more information.