Lifeer App

Lifeer App Used AI

3 devlogs
22m
•  Ship certified
Created by Aayush Arya

Lifeer is a full-stack, all-in-one productivity web app designed to help individuals manage their daily routines, track progress, and stay organized across key areas of life. Built with a modern tech stack—ReactJS, Tailwind CSS, Golang, Firebase, and MongoDB—Lifeer empowers users with intuitive tools to track exercises, notes, expenses, and more, all from a single dashboard.
Key Features
Firebase Auth – Secure login/signup with real-time auth state
Exercise Tracker – Day-wise records, edit/delete functionality, and dashboard progress Notes Section – Date-based to-do tasks, reordering with emoji buttons, and status tracking
Profile Page – Personalized space for future analytics & summaries (In Progress)
Dark Mode – Planned toggle for theme customization
Upcoming Additions – Expense & income tracking, meal logging, and insights

Demo
Repository
Readme

Timeline

Ship 1

0 payouts of shell 0 shells

Aayush Arya

22 days ago

Aayush Arya • Covers 3 devlogs and 22m
Aayush Arya

Lifeer App – Login/Signup Page Devlog (Text Format)

Purpose:
Implement a secure, responsive, and user-friendly login/signup system using Firebase Auth and Tailwind CSS.

  1. Firebase Authentication Integration
    Integrated Firebase project with Email/Password auth method.
    Used createUserWithEmailAndPassword, signInWithEmailAndPassword, and signOut methods from Firebase SDK.

  2. UI Development
    Designed a clean and minimal login/signup page using Tailwind CSS.
    Ensured responsive design across mobile, tablet, and desktop devices.
    Added seamless toggle between Login and Signup forms without animation bugs.

  3. Global AuthContext Setup
    Created AuthContext to manage and persist user state globally.
    Used onAuthStateChanged to track login status and maintain session across page reloads.

  4. Routing and Redirection
    Protected all dashboard routes using Private Route logic.
    Automatically redirected users to /dashboard upon successful login.
    Redirected to /login if the user is not authenticated.

  5. Alert and Error Handling
    Replaced default JS alert() with styled Tailwind boxes.
    Displayed inline error messages for:
    Invalid email
    Wrong password
    Email already in use
    Displayed success messages for successful login/signup.

  6. UX Improvements
    Added loading states during authentication requests.
    Prevented multiple form submissions by disabling button during API call.
    Autofocus and smooth form validation UX.

  7. Upcoming Improvements
    Add Forgot Password functionality.
    Add Google OAuth support.
    Add show/hide password toggle.
    Improve error message translation from Firebase codes to plain English.

Aayush Arya

📅 DevLog — July 22, 2025

👨‍💻 Developer: Aayush Arya

🛠️ Project: Lifeer – Life Management Dashboard

🌐 Live: https://lifeer-app.vercel.app/

📁 GitHub: https://github.com/AayushArya28/lifeer-app

🔧 Features Added & Updates Implemented:

  1. ✅ Landing Page (Hero.jsx)

    • Created a clean, informative landing page for all users
    • Introduced the Lifeer app and displayed all current + upcoming features
    • Includes CTA buttons: → Create Account → Navigates to /signup → Login → Navigates to /login
    • Responsive layout built using Tailwind CSS

  2. ✅ Routing Setup (App.jsx)

    • Added route: / → Renders new Hero.jsx
    • Added route: /login → Renders Login.jsx
    • Confirmed nested protected route at /dashboard with subpages:
      • /dashboard/overview
      • /dashboard/exercise
      • /dashboard/notes
      • /dashboard/profile
    • Route structure kept clean and organized using ProtectedRoute and DashboardLayout

  3. ✅ Lazy Loading Implemented

    • Replaced static imports with React.lazy() for all major components: → Hero, Login, Signup, DashboardLayout, Overview, Notes, Exercise, Profile
    • Wrapped routes inside <Suspense> to show a fallback Loading... state
    • Benefit: Optimized bundle size and faster initial load

  4. ✅ 404 Page (NotFound.jsx)

    • Created a user-friendly Page Not Found component
    • Catch-all route (path="*") redirects unknown routes to this page
    • Includes a button to return to the homepage

📌 Technology Stack Used:

Frontend:
- ReactJS
- React Router DOM v6
- Tailwind CSS

Auth:
- Firebase Authentication

Optimizations:
- Lazy Loading with React.lazy + Suspense

Routing:
- Protected routing with ProtectedRoute.jsx
- Nested routing for dashboard layout

🔮 Upcoming Tasks:

  • Implement Signup Page and hook with Firebase
  • Add Expense and Meal Tracker sections
  • Integrate MongoDB for persistent data storage
  • Add Daily Reminders and AI-powered suggestions
  • Add chart components for visual insights

✅ Status: Stable Dev Build (v0.2.0)

Update attachment
Aayush Arya

📘 Lifeer App – Devlogs

A full-stack Life Management Dashboard to track daily habits, workouts, meals, expenses, notes & more.

Stack: ReactJS + Tailwind CSS | Golang | MongoDB | Firebase Auth | REST API

✅ Phase 1: Project Setup and Authentication

  • ✅ React + Tailwind CSS Setup

    • Installed and configured Tailwind CSS
    • Responsive layout and consistent UI spacing

  • ✅ Firebase Authentication

    • Email/Password Signup & Login
    • Auto-persisted login state using AuthContext
    • Auto redirect to dashboard after login/signup

  • ✅ Styled Error and Success Alerts

    • Red Tailwind alert boxes for errors (like wrong password or email in use)
    • Green alert on successful login/signup

🧱 Phase 2: Dashboard Layout & Routing

  • ✅ Responsive Dashboard Layout

    • Sidebar (with icons): Profile, Exercise Recs, Notes, Logout
    • Main panel: Dynamic content rendering based on selected tab
    • Mobile-friendly design

  • ✅ Routing Structure

    • Protected Routes with Firebase
    • /dashboard, /profile, /exercise, /notes, /login, /signup

💪 Phase 3: Exercise Records Feature

  • ✅ CRUD Operations

    • Add exercises (date-wise)
    • Delete exercise entries
    • Edit exercise entries (fix sets/spelling) — ✅ NEWLY ADDED

  • ✅ Display Format

    • Organized by day in tab/box format
    • Progress tracking in dashboard
    • Show today’s exercise status

📝 Phase 4: Notes Feature

  • ✅ Notes System

    • Task-style notes under specific dates
    • Mark tasks as done
    • Dynamic emoji progress bar

  • ✅ Notes Enhancements

    • ➕ Add new note using button inside each date box
    • ➕ Add new date section
    • ⬆️⬇️ Reorder notes using emoji buttons
    • ✏️ Edit existing notes

⚙️ Phase 5: Core Improvements

  • 🔁 Logout

    • Fully functional logout (clears context and Firebase session)

  • 🌙 Dark Mode Toggle

    • Planned toggle in Navbar or Sidebar (🔜 To be implemented)

  • 📄 Profile Page

    • Route added, UI planned for user stats (🔜 To be implemented)

🛠️ Backend Integration (In Progress)

  • Backend with Golang

  • REST API endpoints for:

    • ✅ Fetch & Post exercises
    • ✅ Fetch & Post notes
    • 🔐 User-specific data only (linked with Firebase UID)

  • MongoDB as primary data storage

🔮 Upcoming Features / To-Do

Feature Status Dark Mode Toggle 🔄 Pending Profile Page UI 🛠️ Designing Expense & Income Tracker 📊 In Planning Meal Tracker 🍱 In Planning Daily Overview Summary 📅 Upcoming Reminder & Notifications 🔔 Later Analytics Charts 📈 Optional

📎 Links

Update attachment