FLASHCARD

Table of contents

• General info
• Technologies
• Demo
• Setup & Installation
• Running The App
• Viewing The App
• Features
• Status
• Contact

General info

Flashcard is a full-stack web application created in Django REST Framework and ReactJS. It will help you memorize the most important vocabulary in a quick and easy way.

Technologies

• Python 3.9.x
• Django 3.2.x
• Django REST framework .12.x
• React 17.0.x
• Redux 4.1.x
• SQLite3/PostgreSQL
• Bootstrap 5
• HTML5
• CSS3

Demo

Check app demo here.

Setup & Installation

Backend configuration

Make sure you have the latest version of Python and pip installed

Clone the repository using the following command

git clone https://github.com/Gamattowicz/Flashcard.git

Create a virtual environment

python -m venv venv

Active the virtual environment

.\venv\Scripts\activate

Install all the project Requirements

pip install -r requirements.txt

Create an .env file to save your environment variables in main directory, where <secret_key_name> is your sensitive data.

SECRET_KEY=<secret_key_name>

Create your database

python manage.py makemigrations

python manage.py migrate

Frontend configuration

Install Node.js and Node Modules:

Move to directory frontend.

cd frontend

Next install all dependencies.

npm install

Running The App

In main directory run django web server:

python manage.py runserver

Move to directory frontend.

cd frontend

Run the production compile script

npm run build

or for development:

npm run dev

Viewing The App

Go to http://localhost:3000/

Features

• User management system

• CRUD operations at words, categories, decks

• Admin panel

• Two exercise modes (reversed and typed) to learn vocabulary

• Easy change of username, mail and password in profile

To Do:

• Add tests
• Add option to import/export words to/from CSV file

Status

Project in progress.

Contact

Created by @Gamattowicz - feel free to contact me!