Workout Planner is a web application designed to help users create, manage, and track their workout routines efficiently. Built with NextJS and TypeScript, it leverages Firebase for backend services including authentication, database, and hosting. The UI is crafted using NextUI, providing a modern and responsive user experience.
Experience the app in action here.
_components/: Reusable UI components._firebase/: Firebase configurations and utilities._providers/: Context providers for state management._types/: TypeScript type definitions and interfaces.pages/: Routes and pages of the application, following Next.js conventions.
This project is built using a range of technologies and libraries, specifically chosen for their efficiency and scalability:
- NextJS: A React framework for building server-rendered apps, ensuring fast load times and SEO friendliness.
- TypeScript: Provides strong typing to enhance code quality and maintainability.
- NextUI: A modern UI library for React, used to design a user-friendly interface.
- SWR: For data fetching, caching, and state management, optimized for React and NextJS.
- Firebase:
- Firestore: A NoSQL database for storing and syncing data in real-time.
- Authentication: Manages user sign-up, sign-in, and security.
Before you begin, ensure you have a Firebase account. You'll need it to set up the backend services for this project.
To get a local copy up and running, follow these simple steps:
- Clone the repository:
git clone https://github.com/Jaron-S/workout-planner.git - Install NPM packages:
npm install - Set up your Firebase project and configure the environment variables in a
.env.localfile as follows:
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
- Run the development server:
npm run dev - Open http://localhost:3000 to view it in your browser.
For detailed instructions on configuration and deployment, refer to the official NextJS and Firebase documentation.