Your challenge is to build out a dashboard which showcases a checklist of countries a user plans to travel. Get it looking as close to the design as possible.
You need to use ReactJs/TypeScript to complete this challenge.
- React :
NextJs
orCRA
- React Component Library :
HeadlessUI
,MUI
orChakraUI
- Database :
MonogoDB
,PostgreSQL
or any database - (Optional) HTML/CSS framework :
TailwindCSS
- Create a public/open repository (Gitlab or Github )
- Submit link to repository & your personal details using this google form https://forms.gle/iTuhssFuMimVvsnC6
- Deadline : 10th December at 12:00 pm
View the optimal layout for the app depending on their device's screen size See hover states for all interactive elements on the page.
- Register before they use the dashboard
- Login to the dashboard (you can create your own UI/flow)
- Save list of countries Bonus : Social Login, you can use https://next-auth.js.org if using NextJs
- Use REST API https://restcountries.com to get countries data
- Create, Update, Read, Delete from list. (you are only adding/removing from the list)
- Search box to find country and add it to the dashboard.
- Add a country to the travel dashboard.
- Click country to view full details
- Mark a country as visited.
- Delete a country from the list
- Filter by visited/planning/all countries
- Delete/Clear all visited countries.
User Modal:
- Name (First Name, Last Name)
- Email (Unique)
- Phone Number
- Date of Birth
- Country
- Creation Date
- Login Date
- Organized Code, folders, components
- Document/Comment your Code
- Standardized Naming conventions (Folders, files, components)
- Serverless functions (Vercel, Netlify)
- Form fields validation
- Error handling & logging
- Env variables : Do not hard code any private or sensitive data
- Create a README.md file with clear instructions on how to Install, Test & Run.
- Toggle light and dark mode
- Drag and drop to reorder items on the list
- Enable application & system logging (errors, actions, login, logout, etc)
- Testing
- Integration tests for all your use cases.
- Write unit tests with a minimum of 60% coverage.