The Flash Card App is a web application built with Next.js that allows users to create, edit, and manage flashcards. It leverages Firebase for data storage and Clerk for user authentication.
- User authentication with Clerk
- Create and manage flashcards
- Edit and delete flashcards
- Dark and light mode toggle
- Responsive design for various screen sizes
- Node.js (version 14 or higher)
- npm or yarn
- Firebase project setup
- Clerk account for authentication
-
Clone the repository:
git clone https://github.com/your-username/flash-card-app.git cd flash-card-app
-
Install dependencies:
npm install
or
yarn install
-
Set up environment variables: Create a
.env.local
file in the root directory and add your Firebase and Clerk credentials:NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id NEXT_PUBLIC_CLOUDFUNCTIONS_URL=your_cloudfunctions_url CLERK_FRONTEND_API=your_clerk_frontend_api CLERK_API_KEY=your_clerk_api_key
-
Start the development server:
npm run dev
or
yarn dev
-
Open your browser and navigate to
http://localhost:3000
to see the application running.
app/
: Contains the main application codeapi/
: API routescomponents/
: React componentsgenerate/
: Page for generating flashcardslib/
: Utility functionstheme/
: Theme configuration for dark and light modes
public/
: Static assets
- Users can sign up or log in using Clerk.
- Once authenticated, users can create flashcards by providing a topic, number of cards, and extra details.
- Flashcards can be edited or deleted as needed.
- Users can toggle between dark and light modes for better accessibility.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.