A community-based habit tracker where users share goals and take on challenges together
- This is a first project using
React
Most of the existing habit tracking platforms were created for personal use. A few habit tracker platforms can share habits with others but lack communication capabilities. Therefore, I decided to develop a community-based habit tracking website that allows users to motivate each other to perform better and keep them moving towards goals.
- JavaScript
- React
- Firebase
- Netlify
- Users can add a new goal card with specific plan, period, and self-reward and share them with other users to build a mindset for goal achievement.
- Users can add a habit card by clicking the new habit button.
- Users can record the dates they completed the habit by selecting it from the calendar.
- Monthly count and total count help users to track their progress.
- Users can create a new challenge or apply for existing group challenge by clicking the participate button.
- Users can check the status of participating group challenges.
- Challenges are displayed in three states: in progress, opening soon, and past.
- Users can participate only once per day for each challenge.
- To complete the mission on the day, users must upload a picture as proof that they performed the challenge.
- When users complete the mission, the achievement rate (%) increases.
- Pictures not related to the challenge topic can be reported by other users.
- In the My page, users can view their goal cards and pictures uploaded during the group challenges.
- Home page
- Sign up / Log in page
- Goal & Reward page
- Habit page
- Challenge page
- My challenge
- Group Challenge
- My page
- Basics of React
- How React hooks work and how to use them
- useState, useEffect, useNavigate
- How to handle routing in a single page application
- Experienced in Firebase
- Experienced in Promise (async/await)
- Implemented a calendar with multiple date selection without any library
- Responsive web design optimized for mobile devices