Streak is a social networking app that allows users to create an activity and keep track of its progress alongside friends incentivizing completion in a fun and enjoyable way.
Deployed here: https://activity-tracker-peach.vercel.app/
Revamped a previous project with considerations to improving features with Google Firebase.
The application takes a mobile first approach and shifts the development process to adapt to mobile screens while scaling down on desktop screens to showcase its capabilities as a mobile product as if it is a iOS or Android app but on the web.
- React
- Chakra UI
- Styled Components
- Firebase Web SDK
- Firebase Authentication
- Firebase Realtime Database
- Firebase Storage
- Webpack
-
Install specified packages
npm i -
Setup the dotenv file with Firebase's app configuration
Documentation here: https://firebase.google.com/docs/web/setup
-
Run the project
npm run dev
- Users can register or login with an email/password or use their Google account for authentication.
-
The presence of a valid access token permits users access to protected routes such as the main dashboard.
-
The dashboard displays the user's avatar, name, activities called challenges, overall metrics in real time, and the nav bar.
- Selecting the avatar allows making account changes such as uploading an image file or deleting the account. The image file is uploaded to Firebase Storage and reflected on the user's profile.
- Users can run a partial or full name search to find other users and add them as friends.
- Activities can be composed and friends added to the activity in the challenge creation flow.
- Users can select challenges from the dashboard to view more details and to add a streak to the challenge. The app also calculates the time remaining in days, hours, or minutes -whichever is the larger time.
