Sun (Farm Mart)

Website for farmers to buy farming equipment

Tech Stack: Next.js (React.js framework), Tailwind CSS, and shadcn UI.

⚠️ Internal company version: Has mock information of clients and their payments. Can mock add clients to company database

Installation

To install, clone this repo using the command below:

git clone https://github.com/HarshalBhalerao/probable-octo-chainsaw.git

Backend

Install Docker and run the command below.

⚠️ Ensure you are in the directory with docker-compose.yml file

docker-compose up -d

Now the server would be up and running at port 3030. For more info, visit https://github.com/dotronglong/faker/wiki/Getting-Started-%5BDocker%5D

Frontend

Navigate to directory called front-end. And, run command:

npm i
npm run dev

This will launch the website on localhost:3000. Currently the website is in dev mode.

You can also launch the app by running the command below:

npm run build
npm run start

The following commands above would build and start the app in prod mode.

Folder Structure

In front-end directory, there are 3 main folders:

• app: Contains pages and routes (We don't have any dynamic routes in this project).
  • (home): This is not a part of Next.js route, the page.tsx file inside is the default homepage.
  • __tests__: Contains tests for APIs.
  • clients: Part of our Next.js route. Can be searched by going to localhost:3000/clients. Contains our table with pagination, filtering and search functionality.
    • add: Part of our Next.js route. Can be searched by going to localhost:3000/clients/add. This contains the form for adding user (mock POST don't actually add user, would be possible if we had a real DB).
  • products: Part of our Next.js route. Can be searched by going to localhost:3000/products. Contains carousel which automatically changes cards and these cards have info about our farming equipments.
• components: Contains a mixture of reusable and custom made components.
• lib: Utility files.

Testing APIs

We have 3 APIs:

• GET Client
• POST Client
• GET Product

Mock files are available in mocks folder. To run tests

npm run test

Philosophy

Built the app keeping these things in mind:

• Build for performance: By default Next.js allows Server-Side Rendering(SSR), helps with Search Engine Optimization (SEO). I have used this to my advantage and rendered pages dynamically. I have practised code-splitting ensuring peak-performance.
• User friendly: Simple design with consistency and user-friendly interface. Have system, dark and light modes for users.
• Handled errors where things could go wrong.
• Responsive design for all browser viewports.

Detailed Information about each page

• Landing Page
• Clients Page
• Products Pages

Other components

• Navbar
• Sidebar

Landing Page (Simple Landing Page with Spline 3D moving Earth)

Dark Mode

Light Mode

Product Page (Carousel)

Dark Mode

Light Mode

Client Page (Table)

Dark Mode

Light Mode

Client Page (Form: Add new client)

Dark Mode

Light Mode

For Mobile devices

Landing Page

Products Page

Client Page (Table, set fixed min-width for better view)

Client Page (Form to add client)

Sidebar