Giter Club home page Giter Club logo

thinkslice-frontend's Introduction

ThinkSlice

Proper banner

Bringing students and educators together with the help of video!

Traditional qualifiers such as logistics and qualifications are not sufficient to represent teaching quality. Using the thin-slicing effect, students can find the right teachers for them by watching videos of teachers teaching their specialty.

For tutors:

  1. Upload short educational videos to showcase your teaching ability.
  2. Provide more information about yourself on your profile.
  3. Potential students contact you to setup a lesson.

For students:

  1. Browse through a catalog of videos to find a teacher that fits your vibe.
  2. Check out their profile and reviews.
  3. Chat with your potential educator to setup a lesson.

Prerequisites

  • Yarn
  • Python 3
  • pipenv

 

Orbital

This project was produced under NUS Orbital (CP2106).

Level of Achievement: Apollo 11

Web Application: https://thinkslice.vercel.app/

Milestone 3: https://docs.google.com/document/d/12ZJZre344KpwpnLlnluU_pgUe5PbZxOR7vvVEONswkI/edit

User Guide: https://github.com/lawwm/thinkSlice-frontend/blob/main/UserGuide.md

Backend Github: https://github.com/lawwm/thinkSlice

 

Installation Guide

Install dependencies as follows.

 

Backend Django Guide

  • Installing dependencies
cd appmanager
pipenv install
  • Starting the server
pipenv shell
cd appmanager
python manage.py runserver
exit

 

Frontend React Installation

  • Installing dependencies
cd frontend
yarn install
  • Starting the server
yarn start

 

Tests Runner Guide

For the frontend, Jest is used for unit testing while Cypress is used for End-to-End tests. Jest files are found within "tests" files inside store folder, while cypress files are stored within "cypress/integration/thinkslice" directory. Mock service worker is used for mocking API calls for uniting testing (Jest).

For the backend, python is used for unit testing.

 

Jest

  • Start Jest Runner
yarn test
  • Start Jest code coverage
yarn run test -- --coverage --watchAll=false

 

Cypress

  • Start cypress runner
yarn run cypress open

 

Python Testing

  • Start Python Code Coverage
coverage run manage.py test .  -v 2
coverage html

Note: You need a local PostgreSQL server for testing.

 

Deployment Guide

We used Vercel for frontend development and Heroku for backend development.

 

Vercel

Create a pull request or push to main to create a vercel deployment. To configure the vercel deployment, edit the YAML files within the directory "github\workflows".

 

Heroku

  • Deploying to heroku
git push thinkSlice main
  • Checking heroku logs
heroku logs --tail

 

Dependencies Guide

Here are the important dependencies for this project.

 

PostgreSQL

PostgreSQL is the database for this project.

  • Download the CLI psql/ GUI pgAdmin 4
  • To access the tables in this project, prefix "public" to their respective table names.
SELECT * from public."userVideos_video"

 

Local Redis/Docker Installation

Redis is used for the chat application as well as for caching.

  • Starting a redis server
docker run -p 6379:6379 -d redis:5
  • Use Docker Desktop to start/stop the server

 

MUX API

Mux API is used for the videos.

 

AWS S3/Cloudfront

 

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.