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
Group name: HyPSSS
Members:
# install dependencies
$ npm install# serve locally at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run startFor more details check out the nuxt documentation.
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 |
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 is implemented in NodeJS which comes built-in with the Nuxt framework.
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.
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.
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 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 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 is exclusively implemented with Nuxt-Links like prescribed in the Nuxt official documentation: "The <NuxtLink> component should be used for all internal links."
Project has been deployed on the Heroku hosting platform and is available at this link
Below is the ER diagram we designed
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:
assetscomponentslayoutspagesstatic