ProjectsPlayTales
- React
- Tailwind CSS
- TypeScript
- Node
- Postgres
- Prisma
What
PlayTales is a full-stack ecommerce store for purchasing story-driven games.
Why
I built this project to further solidify my knowledge of full-stack web development. I wanted to demonstrate my ability to design and implement a complete web application, from the UI to the database. It required a strong understanding of various programming languages, frameworks, and tools, as well as the ability to integrate them seamlessly.
Here are some of the concepts and patterns I have learned:
- Pagination (UI & API)
- Token-based Authentication
- Secure User Session Management
- Data Modelling
- Complex State Management using Context API
- Queries and Mutations
How
I was already comfortable building frontend interfaces using different tools, so I ended up using React, and Tailwind CSS to build a dynamic UI. The main challenge for me was building a complete backend from scratch and integrating it with the frontend. I used Express (Node.js) to create endpoints that handle different tasks such as product searching and user authentication. I designed a Postgres database schema using Prisma and used its client in the different Express endpoints to build type-safe queries. I also implemented user authentication using JSON Web Tokens (JWT) and cookies.
I used other libraries from the React ecosystem for client-side actions: React Router for routing & Tanstack Query for data fetching.
Tech Stack
- Frontend:
React
,TypeScript
,Tailwind CSS
,React Router
,Tanstack Query
, - Backend:
Node
,Express
,Postgres
,Prisma
- Deployment:
Render