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.

📅 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)

📘 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

• 🔗 Live App: https://lifeer-app.vercel.app
• 💻 GitHub Repo: github.com/AayushArya28/lifeer-app