https://github.com/aialok/flashify
Flashify is a powerful web application designed to create and manage flashcards, enhancing learning and memorization processes. | Take u forward Assignment
https://github.com/aialok/flashify
assignment hacktoberfest hacktoberfest-accepted mysql nodejs railway react takeuforward tuf
Last synced: 3 months ago
JSON representation
Flashify is a powerful web application designed to create and manage flashcards, enhancing learning and memorization processes. | Take u forward Assignment
- Host: GitHub
- URL: https://github.com/aialok/flashify
- Owner: aialok
- Created: 2024-08-10T20:52:28.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-08-25T14:22:27.000Z (11 months ago)
- Last Synced: 2025-03-28T05:06:45.357Z (4 months ago)
- Topics: assignment, hacktoberfest, hacktoberfest-accepted, mysql, nodejs, railway, react, takeuforward, tuf
- Language: JavaScript
- Homepage: https://flashify.pages.dev/
- Size: 491 KB
- Stars: 37
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flashify | Take u Forward Assignment
Flashify is a powerful web application designed to create and manage flashcards, enhancing learning and memorization processes.
[Live Demo](https://flashify.pages.dev/)
## Key Features
- **AI-Powered Flashcard Creation**: Put your text and generate question and answer flashcards
- **Manual Creation Option**: Create your manual cards
- **Flashcard Management**:Easily view and edit your flashcards
- **Intuitive User Interface**: Easy navigation and user-friendly experience
## Tech Stack
### Frontend
- React with Vite
### Backend
- Node.js and Express.js
### Database
- MySQL for structured data storage
- Redis for caching and performance optimization
### Deployment
- MySQL hosted on Railway
- Backend deployed on Render
- Frontend hosted on Cloudflare Pages
### AI Integration
- OpenAI API for intelligent flashcard generation
### Additional Tools
- Zod for data validation
- Sequelize as the ODM
## Architecture:
## File Structure
```
|-- backend
| -- src
| |-- config
| |-- controllers
| |-- middlewares
| |-- migrations
| |-- models
| |-- routes
| | `-- v1
| |-- seeders
| `-- services
|-- frontend
|-- dist
| -- src
|-- components
|-- hooks
|-- pages
.github
-- workflows
```
## Setting up project
### Clone the project
```
git clone https://github.com/aialok/flashify.git
```
### Install dependencies
- Move to frontend folder and run the command - `pnpm install`
- Moce to backend folder and run the command - `pnpm install`
### Setup ENV File
- Backend
```
OPEN_AI_API_KEY=
DB_USERNAME=
DB_PASSWORD=
DB_DATABASE=
DB_HOST=
DB_PORT=
REDIS_USERNAME=
REDIS_PASSWORD=
REDIS_HOST=
REDIS_PORT=
NODE_ENV=development | test | production
```
- Frontend
```
VITE_BACKEND_URI=http://localhost:3000
```
### Database Setup
- Make sure to have add all the env variable
- Run command to migrate your database setup : `npx sequelize-cli db:migrate` || `pnpm dlx sequelize-cli db:migrate`
- Make sure you have redis-cli and mysql in local if you are using localhost
- Wohoo ! you are done : )
### Local Database:
- Tables
- Pack Table
- Flashcards Table
### Run your backend and frontend server
- cd to backend `pnpm run dev`
- cd to frontend `pnpm run dev`
### Wohoo ! congrats you are done with setup :)
### Screenshots
Homepage
Create Flashcards
FlashCard Views
Edit Flashcards
Generate with AI
