🔗 Codi-Client

Say goodbye to boring memorization - Codi's flashcard-based platform makes learning to code a fun and seamless experience with progress tracking to keep you motivated.

🔗 Live Version | Live API | Codi API Repo

Table of Content

• 🔗 Codi-Client
  • Say goodbye to boring memorization - Codi's flashcard-based platform makes learning to code a fun and seamless experience with progress tracking to keep you motivated.
  • Table of Content
  • 📷 Thumbnails
  • 🌟 Features
  • 🚀 Getting Started
  • 🧱 Main Structure
  • 📦 Tech Stack (Dependencies)
  • 🔨 contributors
  • ⚠️ Disclaimer

📷 Thumbnails

🌟 Features

• Topics Panel:

• Study Session:

Quiz.mp4

• Flashcard management: users can manage flashcards for a specific topic.

Create_generate_cards.mp4

• Automation & Manual Card Creation

  • Concept Cards: Users can generate flashcard automatically by pasting in a study note into the auto section of create new concept card.
  • Exercise Cards: Users can generate one exercise card automatically by checking the Auto generate exercise checkbox in either create new concept card view or edit a concept card view.

• Analytics

  • Topic statistics: users can review statistics for a specific topic, such as the total number of flashcards, the number of flashcards in each status, and the number of flashcard reviews grouped by date.

• Security:

  • The API requires authentication through Auth0 to access any of its endpoints.
  • Users can only access topics and flashcards they own.

---

🚀 Getting Started

1. Refer to Codi API Repo for installation or refactor files to connect to Live Codi API.

2. Clone it
   git clone https://github.com/PavelKotlov/codi-client

3. Navigate to the repo
   cd codi-client

4. Install all the depndencies
   npm install

5. Sign up with Auth0. Add http://localhost:[PORT] link to Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins. Add https://[app-name.us].auth0.com/authorize to Application Login URI.

6. Create a .env file according to the template below

   REACT_APP_AUTH0_CLIENT_ID=
   REACT_APP_AUTH0_DOMAIN=
   REACT_APP_AUTH0_AUDIANCE=

7. Run the server

   npm start

---

🧱 Main Structure

├── docs                       # screenshots and gifs for readme
├── public
│  └── assets                  # contains static assets like images
├── src
│  ├── components              # reusable UI components
│  ├── helpers                 # utility functions
│  ├── pages                   # components representing each page in the app
│  ├── providers               # contexts and providers
│  └── routes                  # routing components
├─── netlify.toml              # netlify configuration
├─── package-lock.json
├─── package.json
└─── README.md

---

📦 Tech Stack (Dependencies)

• React
• React Dom
• React Router dom
• React Scripts
• mui/material
• mui/icons-material
• Axios
• auth0
• React Ace
• Echarts for React
• React calendar heatmap
• React code blocks
• classnames
• React tooltip

🔨 contributors

• PavelKotlov @PavelKotlov
• Juliana Mochizuki @jkmochizuki
• Shorouk Abdelaziz @ShoroukAziz

⚠️ Disclaimer

• This is a project for LHL web development bootcamp and is not meant for production use

⬆ Go to beginning