whitnessme/MidnightOil

MidnightOil, a clone of Brainscape and Anki and based off the phrase "burning the midnight oil", is a flashcard making application with the theme of old Renaissance paintings.

Midnight Oil

MidnightOil, a clone of Brainscape and Anki, is based off the phrase "burning the midnight oil", meaning to study late into the night. It is a flashcard application with the theme of the late Renaissance era. Users progress their mastery level of the decks/cards they make and study. The phrase originated in the 1630s, at the very end of the Renaissance and entering a transitioning time into the Modern era, so the app tries to tie in the past with it's graphics--depictions of oil lamps and Baroque-style paintings of reading by candlelight-- with Modern design elements that are cloned from Brainscape.

Wiki Links

• MVP Feature List
• React Components
• Database Schema
• User Stories
• Study Session Feature

Technologies

• Backend: Python, Flask, WTForms
• Frontend: JavaScript, React/Redux, AJAX
• Database: PostgresSQL/SQLAlchemy
• Design and Styling: HTML/CSS
• External APIs: Recharts.js, Vose-Alias-Method.py

Features

User Sign Up and Log In

---

---

Decks

• Brief walkthrough:

---

• Screenshots:

---

---

---

---

Cards

• Brief walkthrough:

---

• Screenshots:

---

---

---

---

---

Study

• Users can start a study session that will go through 10 cards, rating how well they did on each card from 1-5.
• Users can see their progress bar go up 1/10th with each 2-5 rating, users will redo every 1 rated card in the session.
• Users can see the checkpoint/results after finishing the session, how many of each rating they did and the current mastery percentage for the deck.

---

404 Page

---

Future Features

• Shared Decks
  • Users can see a list of decks made by other users and make a copy of them for their account to study
  • Users can chose to allow their decks to be shared, either on creation or when editing a deck.

Install Instructions

1. Clone this repo
   • git clone
2. Install dependencies for backend
   • pipenv install
3. Install dependencies for frontend
   • cd react-app
   • npm install
4. Create PostgreSQL user
   • CREATE USER midnight_oil_dev WITH CREATEDB PASSWORD '<password>'
5. Create PostgreSQL database
   • CREATE DATABASE midnight_oil_db WITH OWNER midnight_oil_dev
6. Create a .env file in the root directory based on the .env.example file
7. In .env file:
   • Replace 'password' in DATABASE_URL with your chosen password
   • Enter a secure combination of characters for you SECRET_KEY
8. Flask Migrate and Seed your database in root directory
   • pipenv shell
   • flask db upgrade
   • flask seed all
9. Start backend server in root directory
   • flask run
10. Start frontend server in react-app directory
    • npm start
11. In your browser go to localhost:3000
12. You may use the Demo user or create a new user by clicking on the Log In button. Then you can search, look at products, leave reviews, add items to cart, purchase items, etc..