CyberCoffee

Website created with the theme of an online coffee shop, with this pretext I was able to add several interesting features such as an integrated Blog and a simulation of products in stock with a shopping cart.

🛠 Technologies

The following tools were used in building the project:

• 👉 NextJS
• 👉 ReactJS
• 👉 TypeScript
• 👉 Prismic CMS
• 👉 Date fns
• 👉 React icons
• 👉 React toastify
• 👉 Sass

🤖 Project Status 🚀 Construction... 🤖
Access the address: https://cybercoffee.vercel.app

Getting Started

These instructions will get you a copy of the full project up and running on your local machine for development and testing purposes.

The project can be built with npm or yarn, so choose one of the approach bellow in case you don't have any installed on your system.

• Npm is distributed with Node.js which means that when you download Node.js, you automatically get npm installed on your computer. Node.js

• Yarn is a package manager built by Facebook Team and seems to be faster than npm in general.

Features

• ✅ getStaticProps and getServerSideProps strategies to consume an external api and pass the data pasted into the NextJS server for page rendering;
• ✅ Simulation of a fully functional shopping cart;
• ✅ Add, edit product quantity and delete product from shopping cart;
• ✅ Validate product stock on quantity changes;
• ✅ Automatic calculation of the shopping cart total;
• ✅ Opening whatsapp for direct contact;
• ✅ Prismic api post listing;
• ✅ Data formatting with date Fns;
• ✅ Notify/alert actions that cause application effects to the user;
• ✅ Styling with sass;
• ✅ Modern layout design;
• ✅ All information about the company;
• ✅ Google maps location;
• ❌ Responsiveness with mobile devices;
• ✅ Deploy in Vercel.

How to Install

• To download the project follow the instructions bellow:

1. git clone
2. cd cyber-coffee

• Install the dependencies and start:

3. yarn
4. yarn dev

• or

3. npm install
4. npm run dev

• Have fun just like me while programming

Screen Shots

• Home

• About

• Clients review

• Contact

• Location GPS

• Products

• Coffees

• Shopping Cart

• Blog

• Posts

• Post

• Post Content

Author

Luiz Felipe S. Felizatti 🎯

Contact:

• Linkedin

• Instagram