Novara Bookstore
A full-stack marketplace born from a journey into React and an unexpected, but welcome, dive into TypeScript.
The Story Behind Novara
This project marks one of my first significant steps into the world of React, built in June 2024. The plan was simple: build a beautiful, functional online bookstore to solidify my front-end skills. However, a project rarely goes exactly as planned, and that's where the real learning begins.
When setting up the project with Vite, I enthusiastically selected the React + TypeScript template. At the time, I was focused on React and didn't fully grasp the new layer of complexity I had just opted into. What started as a simple misclick turned into a foundational learning experience.
Faced with a choice, I decided to embrace the challenge. I began by writing the core logic and components in the JavaScript I was comfortable with, and then, piece by piece, I meticulously translated my work into TypeScript. This process, though challenging, was incredibly rewarding. I leaned heavily on documentation and online resources, and through this "trial-by-fire," I gained a deep appreciation for type safety and the robustness it brings to an application.
Novara Bookstore is the result of that journey. It's more than just a portfolio piece; it's a testament to my commitment to learning, adapting, and seeing a challenge through to completion.
A Glimpse of Novara
A quick tour of the application's key features.
| Buyer's Home Page | Buy Page | Product Details Page | Shopping Cart | Blog Platform |
|---|---|---|---|---|
|
 |
 |
 |
 |
| Registration Page | Dashboards Overview | Sellers Dashboard | Blog Page | Blog Page |
 |
 |
 |
 |
 |
Core Features
The platform is a complete marketplace designed for both book lovers and sellers.
For Buyers:
- Intuitive Browsing: Search and filter through a modern, clean interface.
- Detailed Views: Access comprehensive information for every book.
- Persistent Shopping Cart: Your selections are saved as you browse.
- Secure Authentication: Manage your account and orders safely.
For Sellers:
- Personal Dashboard: A central hub to manage listings, orders, and sales analytics.
- Simple Listing Process: Easily create new book listings with image uploads.
- Community Engagement: A built-in blog platform to share content and connect with readers.
The Technology Stack
This project was built with a modern, type-safe stack from front to back.
| Area | Technology | Purpose |
|---|---|---|
| Frontend | React 18, TypeScript, Tailwind CSS | For a modern, type-safe, and beautifully styled user interface. |
| TanStack Query, Wouter, Radix UI | For efficient server state management, lightweight routing, and accessible UI components. | |
| Backend | Express.js, TypeScript | For a fast, reliable, and type-safe server environment. |
| Drizzle ORM, Zod | For type-safe database queries and robust schema validation. | |
| Tooling | Vite, ESBuild, PostCSS | For a lightning-fast development experience and build process. |
Running the Project Locally
Want to see it in action? Follow these simple steps.
Prerequisites:
- Node.js (version 18 or higher)
npmoryarnpackage manager
Installation:
-
Clone the repository:
git clone https://github.com/shivamchaubey027/Novara cd novara-bookstore
Install all the necessary dependencies:
npm install
Start the development server:
npm run dev
-
Open the application: Navigate to
http://localhost:5000in your web browser.
For the Curious Ones (Technical Deep Dive)
For those who want to look under the hood, here are the project's structural and API details.
Project Structure
API Endpoints
Thank you for visiting my project. Feel free to explore the code, run it yourself, and reach out with any questions.