The primary objective is to construct a specific mobile page in react based on the provided images.
- Setup: Initialize the project with Create React App.
- Component Structure: Define the component structure based on the provided design images.
- API Integration: Fetch data from the provided APIs using asynchronous requests (e.g., Axios).
- Styling: Implement UI design and styling using Chakra UI components to match the provided design images as closely as possible.
- Deployment: Deploy the application to a hosting platform (e.g., Netlify, Vercel) and share the deployed URL.
- User's Picture: Fetches the user's profile picture from the provided API endpoint and displays it on the page.
- Points and Level: Retrieves the user's points and level information from the API and showcases it on the page.
- Rank: Displays the user's rank obtained from the API endpoint.
- Points History: Shows the user's points history over time, fetched from the API.
- Badges: Displays the badges earned by the user, obtained from the API endpoint.
- Responsive Design: Ensures that the page layout adapts to different screen sizes, providing a seamless experience across various devices.
- React
- Chakra UI