Greenscape is an e-commerce application that is built to sell plants.
The application consists of three main components:
/admin: the admin is built to manage products, inventory, and customers' orders, as well as summarizing some stats such as revenues, sales, etc./store: the store is built to display products to customers for them to buy/server: the backend API
- Next.js: React-based but with SSR, which leads to better SEO
- TailwindCSS: takes the utility-first approach for better adjustability according to the design, used with
shadcn/uiwhich provides some pre-built UI components
- NestJS: ExpressJS-based framework, but provides the project with a better architecture, which helps the project scale later
- Prisma: makes working with the database a lot easier, especially when managing migrations
- PostgreSQL: there are plenty of relationships between entities, so a relational database fits the project well
- Redis: storing users' session data
- Elasticsearch (in the future): handling products' search
The project was deployed on AWS. AWS Amplify was used to quickly launch the frontend to production environment, the backend was containerized and runs in an ECS cluster, and has a load balancer in front to distribute traffic across the EC2 instances.
Here are two versions of the architecture (with the first one being a cheaper solution, while the second one is more secure):
- First time handling Stripe payments is rather tough because the documentation does not specify exactly how to integrate Stripe with Next.js and NestJS.
- Having to resolve conflicts between pagination, filtering and sorting when working with URL query manipulation.
- Forgetting to add role-based guards to some restricted endpoints resulting in security leaks.
- Inconsistencies between development and production environment when deploying to AWS.
- Authentication on the store so that the customers' data will be synchronized across devices.
- Product variants so that the customers can choose which variant matches their preferences.
- PayPal will be added as an alternative payment method to cards.
You need to have these tools installed on your machine:
To get started, clone the project from GitHub
git clone https://github.com/alphazero-wd/greenscape.git
Install all dependencies
cd server/
yarnSet up Stripe Webhook with the following commands
stripe login
stripe listen --forward-to http://localhost:5000/webhookIn the server/ directory, create a docker.env file at the root and add the following:
POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres # set to anything you like
POSTGRES_DB=greenify # set to anything to you likeSimilarly, create a .env at the root of the server/ directory and add the following variables:
DATABASE_URL=postgres://postgres:postgres@localhost:5432/greenify?schema=public
SESSION_SECRET=s3cr3t # set to anything you like
CORS_ORIGIN_ADMIN=http://localhost:3000
CORS_ORIGIN_STORE=http://localhost:3001
REDIS_HOST=localhost
REDIS_PORT=6379
STRIPE_SECRET_KEY=sk_test_... # from the Stripe dashboard
STRIPE_WEBHOOK_SECRET=whsec_... # from the Stripe CLIRun PostgreSQL and Redis databases stipulated in the docker.compose.yml file
docker-compose up -dApply migrations to the database
yarn migrateFinally, start the server:
yarn start:devInstall all dependencies
cd admin/
yarnCreate a .env.local file at the root of the admin/ directory and add the following variable:
NEXT_PUBLIC_API_URL=http://localhost:5000 # server URLSimply start the development server on http://localhost:3000
yarn dev
Install all dependencies
cd store/
yarnCreate a .env.local file at the root of the store/ directory and add the following variable:
NEXT_PUBLIC_API_URL=http://localhost:5000 # server URLSimply start the development server on http://localhost:3001
yarn dev
- For the backend, NestJS already adopts Dependency Injection out of the box, which loosens the dependence between different parts of the codebase.
- For the frontend, I adopts Facade Design Pattern by extracting hooks into dedicated files to separate the logic from the UI.
MIT license @alphazero-wd