Mini Order Status Tracker

A minimal order fulfillment tracking application built as a take-home assignment. This application allows users to view a list of orders with details like customer information, fulfillment status, and ordered items.

Table of Contents

• Objective
• Features
• Tech Stack
• Installation
• Usage
• API Endpoints
• Version Control
• Presentation
• License

Objective

This application is designed to:

• Display a list of orders with details such as Customer Name, Address, Fulfillment Status, and Order Line Items.
• Use efficient server-side filtering and pagination to improve performance when retrieving and displaying orders.

Features

• Order Management: Displays order details, including customer name, address, fulfillment status, and items ordered.
• Server-Side Pagination and Filtering: Efficient retrieval and display of orders through server-side logic.
• Responsive UI: A clean, responsive interface styled with Tailwind CSS and shadcn components.
• Type Safety: Strongly typed backend and frontend logic using TypeScript.

Bonus

• Authentication: Users can authenticate using the email or google account. This was implemented with Auth.js.

Tech Stack

• Backend:
  • tRPC for API creation.
  • Prisma as the ORM for database interactions.
  • PostgreSQL for the database.
• Frontend:
  • Next.js and React for UI and rendering.
  • React Table for table rendering.
  • Tailwind CSS for styling.
  • shadcn for additional UI components.
• Authentication: Auth.js
• Version Control: GitHub with a private repository.
• Language: TypeScript for both frontend and backend.

Installation

1. Clone the Repository:

   git clone https://github.com/EBEREGIT/cybership_frontend
   cd cybership_frontend

2. Install Dependencies:

   npm install

3. Setup Environment Variables: Create a .env file in the root directory and add the following variables:

    DATABASE_URL=""
   
    BASE_URL="http://localhost:3000/"
   
    ROWS_PER_PAGE=20
   
    AUTH_SECRET="3MGG07UTk3s8VFiw49YMnzOLTsrBudipNGMK111TnrM="
   
    AUTH_GOOGLE_ID=""
    AUTH_GOOGLE_SECRET=""
   
    EMAIL_SERVER_USER=""
    EMAIL_SERVER_PASSWORD=""
    EMAIL_SERVER_HOST=""
    EMAIL_SERVER_PORT=""
    EMAIL_FROM=""

   The following resources might be helpful to get those variables:

   • How to generate Google and GitHub Client Secret and Client ID
   • How To Get Email Server Details for Gmail
   • How to Set up Prisma and NextAuth in a Nextjs Project
   • Introduction to Authentication with Auth.js, Nextjs, Postgresql

4. Setup Database: Run the Prisma migration to set up the PostgreSQL database schema:

   npx prisma migrate dev

5. Populate Database: Run the Prisma migration to set up the PostgreSQL database schema:

   node seed.js

6. Run the Development Server: Start the Next.js development server:

   npm run dev

7. Open the App: Visit http://localhost:3000 in your browser to view the application.

Usage

• Orders List: The main page displays a table with order details, including customer information, fulfillment status, and items ordered.
• Filtering and Pagination: Use server-side logic to efficiently paginate and filter order results.

Version Control

• All code is version-controlled in a private GitHub repository.
• Commits are meaningful and represent significant development milestones.

Presentation

This video demo showcases the application's core functionality, including order viewing, filtering, and pagination.

License

MIT

---

Please feel free to reach out if you have any questions or need further clarification on the project setup.