Skip to content

Stefano-Civelli/HypermediaProject-2022

Repository files navigation

Hypermedia Project 2022 - HyPSS

This project consists of a NuxtJS implementation of a city guide website. In particular it is about the city of Milan.

Running Link: here

Design documentation: here

Home-page-screen


The Team

Group name: HyPSSS

Members:


Running the server

# install dependencies
$ npm install
# serve locally at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

For more details check out the nuxt documentation.


Contribution

NOTE: what is indicated in the table are the main tasks but not the only ones managed by each member

member Tasks
Stefano Civelli Front implementation, DB design, SEO optimization
Pietro Bernardelle Front implementation, DB design, APIs
Samuele Cannilla DB design, DB content, map API
Stefano D'Errico Front implementation, DB design

General architecture

Application is structured following the MVC design pattern: separating data from rapresentation and connecting the 2 aspects with the controller that queries the data and updates the view. The view being the Front-end and model and controller being the Back-end.


Back-end details

Back-end is implemented in NodeJS which comes built-in with the Nuxt framework.

API

All APIs are implemented using the Axios HTTP client. This module comes already integrated with Nuxt and allows us to easily create REST APIs to fetch DB resources from the front-end.

Rendering mode

As rendering mode we, of course, chose Server-side rendering (SSR). SSR sends a fully rendered page to the client, this enables the Google crawler to analyze our page and therefore obtain an higher SEO rating.


Front-end implementation details

Components

Almost all pages are built by assembling components toghether (see Design document commented wireframes for more details). This approach promotes code reusability and better organization, resulting in easier mantainance. Obviously omponents have been implemented following the standard Vue component notation.

Styling

Styling is done both with standard CSS and by using Bootstrap built-in classes (especially for responsive complex layouts like grids and flexbox). All component-related styling is in the <style> tag while global styles are in a CSS file in the assets folder like suggested in Nuxt best practices.

Images

Images are mostly loaded from the project server itself (with some exceptions) for SEO purposes. The remaining bigger ones (very few) are hosted on imgur.

Routing

Routing is exclusively implemented with Nuxt-Links like prescribed in the Nuxt official documentation: "The <NuxtLink> component should be used for all internal links."


Deployment

Project has been deployed on the Heroku hosting platform and is available at this link


DB Design

Below is the ER diagram we designed

ER-diagram


Best practices and Framework Functionalities

Most of the functionalities/best practices provided by the Nuxt framework have been used. For example Layouts (also the built in functionality for the error page management), dynamic pages, components, Nuxt-Links.

Another very important Nuxt feature we used is SSR like mentioned in the previous sections.

We also implemented "meta" tags the Nuxt way by adding it in the head() function of pages

We used most of the dedicated directories provided by Nuxt:

  • assets
  • components
  • layouts
  • pages
  • static

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages