![image](https://private-user-images.githubusercontent.com/112669067/359318650-314791b6-8be6-4ef8-b01a-08147063f451.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNTI3OTcsIm5iZiI6MTczOTM1MjQ5NywicGF0aCI6Ii8xMTI2NjkwNjcvMzU5MzE4NjUwLTMxNDc5MWI2LThiZTYtNGVmOC1iMDFhLTA4MTQ3MDYzZjQ1MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMlQwOTI4MTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03YTRiMGE0NmRkOWEzYzE2YWQ2ZDI2NTMyYjQ2ZDgzMDY0NmNjYzE1NzEwZTc0MGY1YmE1MDllYzJkZDAxZmViJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.aNGMq7WHOs5LEv8PA3K0fSyTcwfHREGqhWtSqMi1Bv8)
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.