en_readme.md

Equilíbrio Natural - Website

Website for the company Equilíbrio Natural (Natural Balance). Landing page in SPA (Single Page Application) format with important information about the company, such as contact forms and product availability in the store.

Screenshot

Appendix

• Thanks to
• Assignments
• Features
• Tech Stack
• Lessons Learned
• Optimizations
• Demo
• Run locally
• Used by
• Related
• Responsible Member
• License

Thanks to

We leave this dedication to the company Equilíbrio Natural (Natural Balance), which trusted in our skills for dissemination, management and automation of its enterprise. And to ETEC Jardim Ângela for providing us the search for the necessary knowledge in the realization of this work.

Assignments:

• unDraw
• Desing no Figma
• Formsubmit
• Netlify
• Unsplash: Primeira imagem
• Unsplash: Segunda imagem

Features

• ✨ Interactive Cards
• 📧 Emailing
• 🔎 Physical store inquiry
• 🔗 Integration with App
• 🛍️ Product availability

Tech Stack

Client: Vite, Vue and TailwindCSS

Server: Vue Router and Firebase

Lessons Learned

What challenges were faced and how were they overcome?

Integrate the Firestore Database API into the project. The way we found to include real-time data from the database was to install the Firebase/Firestore SDK and use the onSnapshot() method.

Optimizations

What optimizations have been made to the code?

The Pnpm package manager was chosen for the project because it offers cold and hot caching. Pnpm is 3x faster and more efficient than Npm and faster than Yarn. Dealing with numerous libraries and modules was an easier and safer task with this tool.

Vite is a tool with the utility to take care of the application bundle. It provides better optimization techniques, resulting in higher application performance both in development and production form for the end user.

When building applications with a bundler, the JavaScript package can become quite large, and thus affect page load time. It is more efficient to split the components of each route into separate chunks and only load them when the route is visited. With this in mind, a technique known as Lazy Load Routes was used. Vue Router offers native support for the technique. Read more.

The site was built using the Mobile First concept. This concept refers to creating any design that prioritizes the experience on mobile devices, while making adaptations for higher resolutions. This allows the site to be completely responsive and adaptable to other screen resolutions, allowing for greater customer inclusion.

Demo

We use Netlify for the online implementation of the site

• Deploy
• Deploy to TCC (alternative database)

Run locally

**Note: You must have the Pnpm package manager. See how to install.

Clone the project

  git clone https://github.com/FrogDevs/Equilibrio-Natural-Website.git

Go to the project directory

  cd Equilibrio-Natural-Website

Install the dependencies

  pnpm i

Start the server

  pnpm dev

Used by

This project is used by the following company

• Equilíbrio Natural

Related

See other related project

• Equilíbrio Natural - Stock Control

Responsible Member

• Web Design and Front-end: @viniciuscosta

License

• MIT
  
  

“You have to be burning with an idea, or a problem, or a wrong that you want to right. If you’re not passionate enough from the start, you’ll never stick it out.”

Steve Jobs