Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/harshpreet931/flashify

Flashify is a fully responsive web-based application designed to enhance your learning experience through interactive flashcards. Whether you're studying for exams, learning a new language, or simply expanding your knowledge, Flashify provides an engaging platform to create, manage, and quiz yourself with customized flashcard decks.
https://github.com/harshpreet931/flashify

css css-grid css3 design express express-js express-middleware html html5 javascript js json localstorage responsive responsive-design responsive-web-design vercel vercel-deployment

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/harshpreet931/flashify
Owner: harshpreet931
Created: 2024-08-23T10:10:42.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-09-28T16:09:27.000Z (about 2 months ago)
Last Synced: 2024-09-30T12:23:36.251Z (about 2 months ago)
Topics: css, css-grid, css3, design, express, express-js, express-middleware, html, html5, javascript, js, json, localstorage, responsive, responsive-design, responsive-web-design, vercel, vercel-deployment
Language: JavaScript
Homepage: https://flashify-quiz.vercel.app
Size: 1.34 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

![BannerImage](./public/images/bannerImg.png)

## Boost Your Learning with Interactive Flashcards!

## Features

- **Create Custom Decks**: Easily create and manage your own flashcard decks.
- **Take Quizzes**: Test your knowledge with interactive quizzes from your created decks or pre-built ones.
- **Track Progress**: View your previous scores and monitor your improvement over time.
- **Responsive Design**: Enjoy a seamless experience across desktop and mobile devices.

## Getting Started

### Prerequisites

- Node.js
- npm

### Installation

1. Clone the repository:
```
git clone https://github.com/harshpreet931/Flashify.git
```

2. Navigate to the project directory:
```
cd Flashify
```

3. Install dependencies:
```
npm install
```

4. Start the server:
```
npm start
```

5. Open your browser and visit `http://localhost:3000` to start using Flashify.

**Note**: If you are facing any issues in npm start.. there may be something running on your portnumber :3000, in order to fix that change the port number in server.js

## Usage
![Explainer](./public/images/explainer.png)

### Creating a Deck

1. Click on "Create Deck" from the home page.
2. Enter a unique deck name.
3. Add cards to your deck by entering the exact format mentioned in the page.
4. Click "Save Deck" when you're finished.

### Taking a Quiz

1. Click on "Take a Quiz" from the home page.
2. Select a deck from the available options.
3. Choose the number of questions for your quiz.
4. Start the quiz and answer the questions.
5. View your results at the end of the quiz.

### Viewing Previous Scores

1. Click on "Previous Scores" from the home page.
2. Review your past quiz performances, including date, deck name, and score percentages.

## Project Structure

- `public/`: Contains all static files (HTML, CSS, client-side JS)
- `server.js`: Express server setup and routing
- `createDeck.js`: Handles deck creation functionality
- `quiz.js`: Manages quiz logic and user interactions
- `previousScores.js`: Displays and manages user's quiz history

## Technologies Used

- HTML5
- CSS3
- JavaScript (ES6+)
- Node.js
- Express.js
- LocalStorage for client-side data persistence

## Hosting with Vercel
Flashify is hosted on Vercel, providing fast and reliable access to the application. You can access the live version at https://flashify-quiz.vercel.app.

## Contact

Harshpreet Singh - [LinkedIn](https://www.linkedin.com/in/harshpreet931/)

Project Link: [https://github.com/harshpreet931/Flashify](https://github.com/harshpreet931/Flashify)

---

Made with ❤️ by Harshpreet Singh