In the project directory, you can run:
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.
- Create a server to crawl data from (formula1.com)
- Create an application by using Typescript/React
- Implement UI ( Information details, Chart, Table )
- Implement feature Search/Filter/Sort based on data from the server
- 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",...
- 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
- 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
- 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!
- 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!
├── 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)