/NextShop

e-shop, level 3: Migration and optimization

Primary LanguageJavaScriptMIT LicenseMIT

Yard32

Next Shop 🛒

This project is part of a courses series where we build an online shop with Stack PERNN (PostgreSQL, Express.js, React.js, Node.js and Next.js).

In the first level of this project, we made the layout of e-shop.

In the second level we transform that code in components and add important interactions.

Now we migrate this code to Next to take advantage of his benefits of this frameworks. You can access the page with the link in the description or by clicking here

Among the main functionalities achieved to this point are:

  • Link pages of native form
  • Conversion the addition of images and styles to an import system to generate automatic hashes and improve file linking
  • Improve of user experience
  • Code standardization with ESLint and Prettier
  • Use of nextjs tags to improve the SEO
  • Reduce loading time with SSR
  • Possibility of install the web app (PWA)

Main behavior 🎉

Below you can see the main actions implemented, visually it is very similar to the previous version, because now the improvements were made at the processing level, easier to implement since it is no longer necessary to configure external packages such as webpack or babel.

Another of the facilities that nextjs offers us is to be able to put a title to each of our pages

fin2

PWA 💻

Another point to note is that you can now install our web application on your computer to easily access it from your menu.

pwa

In the next stages of this project, it is contemplated:

  • Integrate the remaining pages and containers
  • Validate login
  • Integrate with database to generate persistent data and get full functionality