Backend and Frontend Template

Latest version: https://git.chalmers.se/courses/dit342/group-00-web

This template refers to itself as group-00-web. In your project, use your group number in place of 00.

Project Structure

File	Purpose	What you do?
server/	Backend server code	All your server code
server/README.md	Everything about the server	READ ME carefully!
client/	Frontend client code	All your client code
client/README.md	Everything about the client	READ ME carefully!
docs/DEPLOYMENT.md	Free online production deployment	Deploy your app online in production mode
docs/LOCAL_DEPLOYMENT.md	Local production deployment	Deploy your app local in production mode

Requirements

The version numbers in brackets indicate the tested versions but feel free to use more recent versions. You can also use alternative tools if you know how to configure them (e.g., Firefox instead of Chrome).

• Git (v2) => installation instructions
  • Add your Git username and set your email
    • git config --global user.name "YOUR_USERNAME" => check git config --global user.name
    • git config --global user.email "email@example.com" => check git config --global user.email

  • Windows users: We recommend to use the Git Bash shell from your Git installation or the Bash shell from the Windows Subsystem for Linux to run all shell commands for this project.

• Chalmers GitLab => Login with your Chalmers CID choosing "Sign in with" Chalmers Login. (contact support@chalmers.se if you don't have one)
  • DIT342 course group: https://git.chalmers.se/courses/dit342
  • Setup SSH key with Gitlab
    • Create an SSH key pair ssh-keygen -t ed25519 -C "email@example.com" (skip if you already have one)
    • Add your public SSH key to your Gitlab profile under https://git.chalmers.se/profile/keys
    • Make sure the email you use to commit is registered under https://git.chalmers.se/profile/emails
  • Checkout the Backend-Frontend template git clone git@git.chalmers.se:courses/dit342/group-00-web.git
• Server Requirements
• Client Requirements

Getting started

# Clone repository
git clone git@git.chalmers.se:courses/dit342/group-00-web.git

# Change into the directory
cd group-00-web

# Setup backend
cd server && npm install
npm run dev

# Setup frontend
cd client && npm install
npm run serve

Check out the detailed instructions for backend and frontend.

Visual Studio Code (VSCode)

Open the server and client in separate VSCode workspaces or open the combined backend-frontend.code-workspace. Otherwise, workspace-specific settings don't work properly.

System Definition (MS0)

Purpose

Our project aims to provide an easy-to-use and convenient way to rent a car online. Users can register on the website, make bookings in advance, select the time period of the rental, and choose a type of car that they like, after which they can pay for their order online. Managers of the car rental service receive the orders through the system, allowing them to prepare the selected cars for the customers. They can also upload, modify and delete the rental cars in the system.

Pages

Landing page:

The first page where the user arrives after opening the website. Provides a short introduction of the service, shows the car fleet available for rental as well as their respective prices. It includes a simple calculator for calculating the expected price based on the number of days for the rental and the selected car. It also offers the user to sign up for the service or to log in to make a reservation.

Sign Up page:

The sign up page lets the user register for the service. It includes a form asking for personal data, such as email address, name, and also asks them to set a password.

Log In page:

This page is both for the user to log in and access the rental page, and also for the manager to access the admin page. It has a simple log in form asking for username/email and a password, and depending on the identity of the person (user or manager) it leads to either one of those options.

Rental page:

This page is the main focus of the service, it is only available for logged in users and it includes a multi-page wizard consisting of clearly laid out steps that walk the user through the process of booking a car.

These steps are:

1. Car selection
2. Pickup location selection
3. Form for filling in personal information
4. Payment screen
5. Final booking confirmation

Manager admin page:

This page is only available for the manager after they log in, and it allows them to manage and update their fleet. There are options for adding new cars to the system, and they can also see their existing cars, and modify their details as necessary.

Entity-Relationship (ER) Diagram

Teaser (MS3)