Getting Started with Create React App

In the project directory, you can run:

cp .env.template .env

yarn

yarn dev

Runs the app in the development mode.
Open http://127.0.0.1:5173/ to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Description

1. Verify features

1. Create a server to crawl data from (formula1.com)
2. Create an application by using Typescript/React

• Implement UI ( Information details, Chart, Table )
• Implement feature Search/Filter/Sort based on data from the server

2. Create branches based on the task's feature

• Implement task features relate to the branch
• Control marge/pull requests in source code
• Commit message follows the pattern. Ex: feature "feat: implement search feature",...

3. Pick libraries to support coding

• Control source code: Eslint, prettier
• Build tool: Vite
• Fetch server's data: react-query ( Cache data response, loading state )
• Chart: chart.js, react-chartjs-2
• UI lib: ant design
• State routing: react-router-dom
• Utility CSS: Tailwind

5. Implement coding

1. Result Page

• Call 'https://formula-1-api.onrender.com/result/${year}' GET Method will receive ALL RESULT from that ${year}
• Data type:

type ResultOfTheYearType = {
        grandprix: string;
        date: string;
        winner: string;
        car: string;
        laps: string;
        time: string;
    }

• UI: Display data on Table and Chart
• Feature: Sort time asc and desc
• Skeleton loading when waiting for response from server

2. Team Page

• Call 'https://formula-1-api.onrender.com/teams' GET Method will receive ALL TEAMS
• Call 'https://formula-1-api.onrender.com/team/${teamName}' GET Method will receive THE ${teamName}'s details
• Data type:

type TeamCardType = {
        rank: string;
        points: string;
        teamName: string;
        teamImg: string;
        drivers: Array<{
            firstName: string;
            lastName: string;
            imgDriver: string;
        }>
        carSlug: string;
    }

type TeamDetailType = {
        teamDetail: {
            fullteamname: string;
            base: string;
            teamchief: string;
            technicalchief: string;
            chassis: string;
            powerunit: string;
            firstteamentry: string;
            worldchampionships: string;
            highestracefinish: string;
            polepositions: string;
            fastestlaps: string;
        };
        teamMember: Array<{
            avatar: string;
            number: string;
            name: string;
            team: string;
        }>;
        listParagraph: Array<string>;
        listYear: Array<string>;
    }

• UI: Display data on the card components
• Feature: Search Team by name
• Skeleton loading when waiting for response from server!

3. Driver Page

• Call 'https://formula-1-api.onrender.com/drivers' GET Method will receive ALL DRIVERS
• Call 'https://formula-1-api.onrender.com/driver/${driverName}' GET Method will receive THE ${driverName}'s details
• Data type:

    type DriverCardType = {
        rank: string;
        points: string;
        firstName: string;
        lastName: string;
        nameSlug: string;
        team: string;
        flagImg: string;
        driverImg: string;
        numberImg: string;
    }

    type DriverDetailType = {
        driverImg: string;
        driverNumber: string;
        driverFullName: string;
        driverDetail: {
            team: string;
            country: string;
            podiums: string;
            points: string;
            grandsprixentered: string;
            worldchampionships: string;
            highestracefinish: string;
            highestgridposition: string;
            dateofbirth: string;
            placeofbirth: string;
        };
        listParagraph: Array<string>;
    }

• UI: Display data on the card components
• Feature: Search Driver by name
• Skeleton loading when waiting for response from server!

Folder structure

├── src
│   ├── modules
│   │   ├── common (Define common component)
|   |   |   |   ├── components (Define common components: Button, input, radio button, checkbox, ...)
|   |   │   │   │   ├── **/*.css (Additional style)
|   |   │   |   |   ├── hook (Custom hook to handle logic for components)
|   |   |   |   |   |   ├── useComponents.ts (File handle logic for components)
|   |   |   |   |   |   ├── constant.ts (Define constant which is used for this component)
|   |   |   |   |   |   ├── helpers.ts (Define helper functions which is used for this component)
|   |   │   |   |   ├── *.tsx (Component only contain UI state)
|   |   │   |   |   ├── index.tsx
|   |   |   |   ├── icons (Define common components: Button, input, radio button, checkbox, ...)
|   |   │   |   |   ├── IconName
|   |   |   │   |   |   ├── index.tsx
│   │   ├── skeletons (Define Loading UI for specific component)
│   │   │   ├── SkeletonsName
|   │   │   │   ├── SkeletonsName
|   │   ├── layout
|   |   |   ├── LayoutName
|   |   |   |   ├── hooks (folder constant file logics for components)
|   |   |   |   |   |   ├── useLayoutName.ts (File handle logic for Layout)
|   |   |   |   ├── index.tsx (Layout UI)
│   ├── lib
|   │   ├── context (Define all context used in project)
|   |   |   ├── ContextName.ts
|   │   ├── hooks (Define all custom Hooks)
|   |   |   ├── useHookName.ts
|   │   ├── utils (Define all utils function in project)
|   |   |   ├── group
|   |   |   |   ├── groupFunctionName.ts (Function name)
│   ├── pages
|   |   ├── index.tsx (HomePage)
|   |   ├── group
|   |   |   ├── groupPageName.ts (Define page's name)
│   ├── types
|   |   ├── global.d.ts (Define global type)
│   ├── App.tsx (Custom route)
│   ├── main.tsx (Custom App)
│   ├── index.css (Custom global style)
├── public
├── package.json
├── yarn.json
├── .eslintrc.cjs (Eslint rule setup)
├── .prettierrc
├── vite.config.ts (Config file for Vite App)
├── tailwind.config.cjs (Config file for Tailwind lib)
├── postcss.config.cjs
└── tsconfig.json (Config path, import and export for Next)