PlanetScale

React.js

SWR

Vercel

Tailwind CSS

Prisma

TypeScript

Next.js

This full-stack app is designed to help people reduce plastic consumption by purchasing products with less plastic content.

• Connected the application to a MySQL database of product data using Prisma ORM (Object Relational Mapper).
• Hosted the product data in the cloud using PlanetScale.
• Created a database schema with a model definition of the product objects using Prisma Client, a query builder.
• Utilized Tailwind CSS, a utility-first CSS framework, to efficiently style the UI of the app.
• Animated content with react-spring, which is a physics based animation library.
• Leveraged Next.js as the React library and for API routes for server-side API routes as the backend.
• Deployed the app to Vercel from a GitHub repo.

Technology

• PlanetScale - open source database platform
• React.js - user interface library
• SWR - React hooks for data fetching
• Vercel - platform for deploying and hosting
• Tailwind CSS - CSS framework
• Prisma - database toolkit for PostgreSQL
• TypeScript - strongly typed programming language
• Next.js - React framework for production