carworkshop

Carworkshop is an app consisting of a landing page and dashboard for the client and for the admin/employee.

Live demo
• Coming soon

Admin login credentials
Email: [email protected]
Password: test

Client login credentials
Email: [email protected]
Password: test

Table of Contents

• General Info
• Technologies Used
• Features
• Screenshots
• Setup
• Project Status
• Room for Improvement
• Contact

General Information

Carworkshop is an app consisting of a landing page and dashboard for the client and for the admin/employee.
The landing page (home) consists of navbar at the top of the website, an information section where a potential customer can learn more about the workshop and a footer at the bottom of the page with the most important information about the workshop. In addition, when being at the bottom of the page, you can use the button to return to the top of the page.

The dashboard is different for the client and different for the admin. In client dashboard user can easily search for service history, cars overview and appointments from the car repair shop section, and for order history and new offers from car shop section. From dashboard user can quickly navigate to manage cars, appointments and shop subpages. On the navbar in the top of the dashboard user can navigate to my cars, appointment, shop, user profile and settings subpages. User can additionally return to the homepage and logout from dashboard.

In admin/employee dashboard admin can easily search for services history, employees overview, appointments and recent purchases tables. From dashboard admin can view details or edit/delete table items. On the navbar in the top of the dashboard admin can navigate to warehouse and employees subpages. Admin can additionally return to the homepage and logout from dashboard.

Technologies Used:

• JavaScript ES6+ 
• TypeScript 
• Node.js 
• Express 
• React.js 
• Docker 
• Tailwind 
• HTML5 
• CSS3 

🛠️ Tools:

• Mongodb (app db) 
• AWS S3 (product images) 

Features

General

• Sign up an account
• Sign in to account (with user authentication)
• Sign in and sign up form validation (on frontend, and on backend)
• All forms validation on client side

Client dashboard

• Service history table (service details)
• Cars overview table (manage button that navigates to my cars subpage)
• Appointments table (add button that navigates to appointments subpage)
• Order history table (order details)
• New offers carousel with shop now button that navigates to shop subpage)

Client dashboard cars

• Add car
• My cars table (car details, edit and delete)

Client dashboard appointment

• Make an appointment (form to create appointment)

Client dashboard shop

• Shop navbar with currency and items cart
• Products category filter
• Products per page selection
• Search items filter
• Add item to cart (with validation)
• Shopping cart with items (calculate price of single items and subtotal, remove items from cart)
• Shopping cart items checkout (connect with stripe payment service api for payment processing)
• Shopping cart items saved in cookies

Client dashboard profile

• Client profile details
• Client profile editable settings

Admin dashboard

• Services history table (add service, service details, delete service)
• Employees overview table (manage button that navigates to employees subpage)
• Appointments table (appointment details, edit and delete)
• Recent purchases table (purchase details and edit)

Admin dashboard warehouse

Car repair shop items section

• Products category filter
• Products per page selection
• Add new item
• Items list (item details, edit and delete)
• Items list pagination

Car shop items section

• Products category filter
• Products per page selection
• Add new item
• Items list (item details, edit and delete)
• Items list pagination

Admin dashboard employees

• Add new employee
• Employees table (employee details, edit and delete)

Screenshots

Landing page

Client dashboard

Admin dashboard

... and many more!

Setup

Localhost version:

1. Create New Folder
   

2. Clone project

Type
'git clone https://github.com/kamilbochno/carworkshop.git into the console/git cli

3. Launch development server

Type
'cd backend'
Create '.env' file (required variables are located in env-sample)
Then
type 'node app.js' in console and start the development node server

4. Launch development frontend

Launch new terminal
Then type
'cd frontend'
Then
type 'npm start' in console and start the development frontend

Docker version:

1. Create New Folder
   

2. Clone project

Type
'git clone https://github.com/kamilbochno/carworkshop.git into the console/git cli

3. Run and build dockerized development app

Type
'docker-compose up --build'

Project Status

Project is: 🔥 COMPLETED 🔥

Improvements to be done

• Mobile version of the application
• Improvements on source code
• Investigate for unexpected bugs and fix them
• Improve app loading speed
• Improve api speed

Contact

Created by Kamil Bochno - feel free to contact me!