Skip to Main Content

ProjectsPlayTales

Project Screenshot for My PlayTales Project
  • 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