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

The system (Kirby's Ticket Emporium) will provide users with a place to centralize information about various events such as name, age limit, ticket price and availability, date, and location. Two types of users will interact with the system: customers and organizers. Customers will be individuals that can purchase tickets for events using the system, while organizers will add the events they organizing to the platform.

Pages

Note: We added a header bar to the website to allow the user to easily access the home page, their account page, as well as the login/logout button. This will not be mentioned in all the page description as we will assume that its presence and functionality is known.

• Home: it will display the different events that are registered on the platform, as well as preview (image, and description). It will allow the user to see details about events, as well as filter and sort through them using the given parameters;
• Event page: it will show more detailed information about the event (event image, description, location, date, age limit, ticket price/availability), as well as allow the customer to go to the ticket buying page;
• Ticket purchasing page: we use the Stripe API to aid in ticket purchasing. The customer will be redirected to this page, and can add the information needed to buy a ticket there. It is important to note that the header bar is not on this page, so the user will use a back button to return to the Home page;
• Account page: this page changes based on the type of user logged in (customer or organizer). It shows a jumbotron-like banner at the top with the user's name. Both types of users will have a tab below that called Settings. There, they will be able to edit their account information in real time, as well as delete their account. If the user logs in as a customer, they will be able to access another tab: Your Tickets. They can see their purchase tickets there. The organizer has a Your Events tab instead, as well as a Manage Events tab. In the former, they can see the events they have added to the website, and in the latter, they can edit the information of an event as well as delete it.

Entity-Relationship (ER) Diagram

Teaser (MS3)

Learning outcomes

In this project, we learned quite a few new languages and frameworks, as well as some valuable lessons in features for web development, Model-View-Controller (MVC) architecture, and project scoping.

For the backend, we learned how to code in Javascript (JS) and use NodeJS and Express. We implemented a RESTful API that takes advantage of API versioning and HATEOAS, and how to connect to a Mongo database using Mongoose. Here, we defined the schemas for the objects in the database (the models in MVC architecture) and the endpoints that the frontend would communicate with in the controllers (MVC).

For the frontend, we learned about Vue and how it enhances HTML, CSS, and JS to create more accessible and complex user interfaces (views in MVC), and how to implement sessions, authentification, and online payments. BootstrapVue was used to have responsiveness in our project to allow any user to enjoy the application, regardless of device.

We also learned a bit about project scoping. Our project was a lot to undertake for beginners in web development, and we realized that a little too late. We had advanced functionalities (online payments) while lacking some of the basic requirements of the system. Therefore, from now on, we will focus more on delivering the MVP of the project before being able to deliver all the advanced functionalities that we want.