Delicias Da Si (Ecommerce)

Overview   |    Demonstration   |    Requirements   |    Technologies   |    Layout   |    Usage

Report bug · Request feature

Overview

This project was developed as a Minimum Viable Product (MVP) for future e-commerce projects I might create. Additionally, it was a way to help my family's homemade sweets business grow through a delivery service while also serving as a great challenge for me to improve my skills.

Tech Stack

• Framework: Next.js (with TypeScript)
• Backend: Next.js API Routes (Server-side rendering as a challenge)
• Database: Firebase (Easy to manage, free plan suitable for the project’s initial phase)
• CMS: Prismic (Headless CMS for content management)

Why Prismic?

To bridge the gap between the store owner and the website content, I chose Prismic CMS. It provides an easy-to-use interface for managing dynamic content without requiring direct code changes. Prismic offers:

• A user-friendly UI for managing website content
• A flexible document-based structure
• API-driven content delivery
• Easy integration with Next.js

I also created a Notion manual for store owners to manage content efficiently. You can check it out here.

Challenges & Learnings

Developing this project alone meant handling everything from logo redesign and website UI/UX to full-stack development. My main challenges included:

• Building a monolithic structure with Next.js Server-Side Rendering
• Managing a scalable and cost-effective database with Firebase
• Integrating Prismic CMS for seamless content updates

Although there are many aspects to improve and optimize, this journey has been a great learning experience, and I truly enjoyed tackling this challenge!

To-Do List

• When the store is closed, only allow scheduled deliveries
• Admin Module
  • Admin can change order delivery or pickup date
  • View completed orders
  • View user data
  • Grant coins to users
• Phone number confirmation
• Integrate order flow with delivery personnel registered by admin
• Order review via Google
  • Users earn points after confirming a review

If you're interested in the project or have any feedback, feel free to contribute or reach out!

Demonstration

Delicias.da.Si.-.Demonstration.Video.mp4

Requirements

• Nodejs
• Yarn

Technologies

• React.js
• Next.js
• Typescript
• Firebase
  • Auth
  • Firestore
• Prismic CMS
• React Google Maps
• Styled Components
• React Hook Form
• Swiper
• Nodemailer
• Yup
• Eslint
  • Airbnb-config with another pessoal rules
  • Import helpers plugin
• Prettier
• Commitizen

Layout

You can view the project layout via this figma link.

Usage

You can clone it on your pc using the command:

git clone https://github.com/Lissone/delicias-da-si.git
cd delicias-da-si

Install dependencies using:

yarn
# or
npm install

Need to add environment variables:

# .\.env.local
# API
NEXT_PUBLIC_BASE_URL_API=http://localhost:3000/api
SECRET_KEY=super_secret

#PRISMIC CMS
NEXT_PUBLIC_PRISMIC_REPOSITORY_NAME=

#GOOGLE ANALYTICS
NEXT_PUBLIC_GA_TRACKING_ID=

#GOOGLE MAPS API
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=

# FIREBASE
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=

# NODEMAILER
NODEMAILER_HOST=
NODEMAILER_PORT=
NODEMAILER_USER=
NODEMAILER_PASS=
NODEMAILER_FROM_EMAIL=

# WHATSAPP
WHATSAPP_LINK=

Run application:

yarn dev
# or
npm run dev

The application will be available at http://localhost:3000

License

Distributed under the MIT License. See LICENSE for more information.

Made with ❤️ by Lissone

---