Giter Site home page Giter Site logo

magnusrodseth / it2810-project-3 Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 1.0 4.28 MB

πŸ‘¨πŸΌβ€πŸ’» Project 3 in IT2810 - Web Development

Shell 0.82% TypeScript 97.08% JavaScript 1.00% HTML 1.10%
apollo apollo-client express graphql graphql-codegen mantine mysql prisma react reactive-variables rollup typescript zod

it2810-project-3's Introduction

Team 11: Project 3

Description

This project is full-stack web application about Rick and Morty characters.

As a user, you can search and filter characters. As a logged in user, you can rate a given character. You can also see a leaderboard of all users' number of ratings, sorted in ascending or descending order.

Screenshots πŸ“·

Landing page

Landing page

Dashboard

Dashboard

Register

Register

Login

Login

Leaderboard

Leaderboard

Character with rating

Rated character

Live demo

Please use this link to visit a live demo of the website.

Developer Information

Developed by Sebastian Sole, Julian Grande and Magnus RΓΈdseth.

Documentation

Please read the docs documentation.

Note that we have extracted the section about universal design, web accessibility and sustainable development from the docs documentation and placed in a separate file: docs/ACCESSIBILITY.md.

Tech stack and libraries

frontend

  • React
  • TypeScript
  • Mantine, a library with UI components and useful hooks
  • Zod Schema Validation
  • Apollo GraphQL client
  • Apollo global state management
  • Jest
  • JSON Web Token, for handling the user session
  • React Testing Library
  • Cypress, for end-to-end testing

backend

  • Express, a web server
  • TypeScript
  • GraphQL
  • JSON Web Token, for handling the user session
  • Prisma Client, a client for interacting with the PostgreSQL database
  • Rollup, for transpiling and bundling the application to JavaScript

Database

  • MySQL, a relational database running on the virtual machine hosted by NTNU

Running the application

Running frontend

# Navigate to the frontend directory
cd frontend

# Install dependencies
npm i

# Start application
npm start

Running backend

# Navigate to the backend directory
cd backend

# Install dependencies
npm i

# Start application in development mode
npm run dev

# or

# Compile and start application in production mode
npm start

Connecting to the database

Ensure you have a .env file located in the backend/.env directory with the following contents:

PORT=8080
DATABASE_URL="mysql://team-11:[email protected]:3306/project3"

The .env file is not part of the .gitignore, as it is not sensitive information in this project, and other students require access to the database in order to run it locally.

Please see backend/package.json for more information of the available scripts regarding the database.

Testing the application

This part assumes that all dependencies are installed. The end-to-end tests assume that the frontend is running, as it attempts to connect to it before running the end-to-end tests.

Testing frontend

# Navigate to the frontend directory
cd frontend

# Run unit tests and component tests
npm test

# Run E2E tests in browser
npm run test:e2e

# or

# Run E2E tests headless
npm run test:e2e:ci

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.