Skip to content
This repository has been archived by the owner on May 3, 2023. It is now read-only.

BhawickJain/study-resources-catalogue-fe

 
 

Repository files navigation

Study Resources App


⚠️ This team project is archived, but you can access the code and the development approach below ⚠️


CHANGES after team project:
 - [x] setup docker containers for local development

This is a full-stack application using:

Typescript Heroku Bootstrap Netlify cypress Jest React NodeJs Postgres

⚠️ The backend may take 3-5 minutes to warm up and may not have any resources to present ⚠️

This repository is the front-end which is deployed on netlify (⚠️ not actively maintained).

The backend repository which is deployed on Railway was originally Heroku at the time of development.

Overview

This a small full-stack application which allows a student to collaboratively submit and explore a shared catalogue of useful study resources (articles, exercise sets, youtube videos, tools, ebooks and podcasts).

Features

The following features have been implemented in the application.

When a user visits the app:

  • They can see recommendations
  • They can find more recommendations:
  • They can search resources to find those that contain a given string in the name, description, tags, or author.
  • They can filter by tag to find all resources which have that tag
  • They can simulate signing in by selecting their name from a drop-down

When a user visits the app:

  • They can add a new resource recommendation (see "what's in a resource recommendation?")
  • If the resource they are recommending is already in the database, a duplicate should NOT be registered, rather:
    • They can give a like or dislike (along with a comment, in each case) to a resource already in the db.
  • They can add or remove a resource from their “to-study” list.
  • They can view their “to-study” list.
  • They can simulate signing out by clicking an appropriate button or link

CI/CD and Automated Testing

The project uses Cypress and Jest, along side Github Actions to perform integration and unit tests.

Deployment is performed automatically either on Netlify or Railway (previously Heroku) when a pull request is merged into main.

⚠️ for optimum contrast for image viewing, use light mode ⚠️

Database Design

database design

Application Architectural Diagram

architectural diagram of the study resource app

UI Wireframe

ui wireframing of the frontend

React Component Breakdown

react component breakdown

Technical Presentation

We also held a presentation to provide an overview of how the full-stack app work behind the scenes [link]

About

academy.tech collaborative project -- Frontend

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 92.8%
  • CSS 3.3%
  • JavaScript 2.0%
  • Shell 1.6%
  • HTML 0.3%