m-sureshraj / formula-1

Formula 1 - Application

Formula 1 is a single page application that presents a list that shows the F1 world champions starting from 2005 until now. Clicking on an item shows the list of winners for every race for the selected year.

Requirements

• Node.js >= v16.x.x
• nvm (optional)

Getting Started

First, clone the project to local:

> git clone [e-mail]:m-sureshraj/formula-1.git

Navigate to the cloned project and install the project dependencies. Also, make sure you are using Node.js version >= v16.x.x to avoid any dependency incompatibility issues.

If you have nvm available on your system, run the nvm use command from the project root to switch to the correct Node.js version.

> cd </path/to/the/cloned/project>
> npm install

Run the development server:

> npm run dev

Open http://localhost:3000 with your browser to see the result. The page auto-updates as you edit the file.

Tech Stack

• Next.js - For client side rendering & static side generation (SSG)
  • TypeScript
  • CSS Modules with SCSS - Component scoped styles with CSS Modules
  • React context for shared states
  • Functional Components with Hooks
• React Query - Data fetching & Caching
• Cypress - For End-to-End (E2E) tests
• ESLint & Prettier - Code quality tools

Design References

• User Interfaces

Technical Choices

• The application home page has been statically generated at build time to improve the first contentful paint (FCP). Also, statically generated pages can be cached easily by CDNs. Which drastically reduces the page load time.

• The react-query package has been used for data fetching and caching. Since the application is read-only (no mutations), we can fully utilize the caching to improve the application performance. With caching, subsequent requests to a specific season page show the results instantly without even showing the loader.

• CSS Modules package allows us to write component scoped styles without worries of selector name collisions or affecting other components’ styles. Since Next.js supports CSS Modules out of the box, we can use it without configuring anything.

Improvements

• Make the pages fully responsive
• Server-side render (SSR) the season result page to improve the page's first contentful paint (FCP) and time to interactive (TTI).
• Document and test reusable components via Storybook
• Configure git hooks via Husky package to validate commit messages
• Improve End-to-end tests via Snapshot testing.
• Disable deployment tasks for specific commits to reduce resource usage. For example, commits that start with docs: don't have to trigger deployment or run E2E tests.