Bringing wig products and services online for easy access and convenience in Ghana
The WIG!T Web Application is a full-stack web project that aims to restore customer trust in online shopping. Our mission is to bring shopping closer to the people. We are inspired by the need to provide safety, assurance, quality, and peace of mind to customers who simply want to experience the joy and convenience of shopping.
The Web Application aims to reduce customer wait times by providing seamless user experience, customer service, and delivery experience. We keep customers informed and reassured every step of the way.
To learn more about the WIG!T brand, you can:
- Visit the landing page.
- Know the founder and developers.
- Read our blog post on the launch of the Web Application.
- Try out our application.
The procedure outlined expects that you're setting up for testing or development. The DevOps team will be responsible for server setup and configuration required in a production environment.
Provided you use Linux/GNU and have git installed, the application can be started by cloning this repository on the command line using the following command:
git clone https://github.com/wigit-ng/webapp.git wigit-webappchanging working directory into the application directory:
cd wigit-webappThe backend is written in Go Programming Language and uses the Gin Web Framework. Server configurations will be carried out by the DevOps team in production prior to backend deployment. The following instructions apply to devolopment and testing. Documentation for the backend API is available on GitHub. Documentation on the back-end API has also been done using Swagger.
You only need docker installed.
Navigate to the backend directory from the root of the project:
cd backendRun the docker compose command:
docker compose up --build -dto create three required services, and start three required containers namely:
- wigit
- wigit-mysql
- wigit-redis
Run docker compose ps to see the containers running.
The wigit container runs the main app, and listens for connections on port
8080.
NB: You can edit this sample.env file based on your preferred backend configuration, and then rename it to
.envto allow docker compose use it instead of the defaults, if you wish.
You can now send requests to the backend API on port 8080. You can use cURL,
E.g but I like to use xh. Cleaner output and
easier syntax.
xh:
xh :8080/api/v1/productscURL:
curl http://localhost:8080/api/v1/productsYou will need to create a regular user account:
xh:
xh post :8080/api/v1/signup email='[email protected]' password='password' \
repeat_password='password' first_name='John' last_name='Doe' \
address='No 10. Nothing Rd' phone=07038639012cURL:
curl -X POST http://localhost:8080/api/v1/signup \
-H "Content-Type: application/json" \
-d '{
"email": "[email protected]",
"password": "password",
"repeat_password": "password",
"first_name": "John",
"last_name": "Doe",
"address": "No 10. Nothing Rd",
"phone": "07038639012"
}'Then, update the role from customer to admin to enable you manage
products and services by starting up a shell in the wigit-mysql container:
docker exec -it wigit-mysql bashGo into the database:
mysqlUpdate the newly created user role to admin:
UPDATE wigit.users SET role = 'admin' WHERE email = '[email protected]'; exit;Exit the wigit-mysql terminal by typing exit.
The above actions now gives the user permission to perform admin duties, like managing products and services.
JWT is used for authentication. A sample request to add a new product looks like:
xh:
xh post :8080/api/v1/admin/products -A bearer -a token_returned_on_signup \
name='Ghanaian wig' description='A custom made wig for ghana' stock:=10 price:=300 \
image_url='https://images.pexels.com/photos/973406/pexels-photo-973406.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' \
category='straight'cURL:
curl -X POST http://localhost:8080/api/v1/admin/products \
-H "Authorization: Bearer token_returned_on_signup" \
-H "Content-Type: application/json" \
-d '{
"name": "Ghanaian wig",
"description": "A custom made wig for Ghana",
"stock": 10,
"price": 300,
"image_url": "https://images.pexels.com/photos/973406/pexels-photo-973406.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"category": "straight"
}'The docker environment is setup to persist the data between runs, or even if a
new container is spun, as volumes are mounted in the wigit-docker-data
directory for the database and logs.
Visit the docs to see more available endpoints and required fields.
For the frontend, the initial steps are carried out on the already configured frontend server in production, or anywhere for testing and devolopment purposes. The frontend depends on a deployed backend whose hostname is used in the source code.
Next, change directory into the frontend directory which is where the frontend source code resides and is the root of the frontend built with Next.js.
cd frontendinstall all dependencies needed with:
npm installIn production, the Frontend is built using npm build, and then the static
files are duly deployed on the server. For testing purposes, the devolopment
server will do. Start it by running:
npm run devVisit http://localhost:3000 on your browser to interact with the application.
The fullstack application can be interacted with from the browser by visiting the deployed application at the webapp.
Anyone can perform the following:
- Visit the homepage
- View
Products - View
Services - View
Aboutpage - View
Contact Uspage
Signed-in users can additionally:
- Add items to the cart
- View cart
- Place orders
- Book services
- Track orders and bookings
- View and edit profile
- Delete their account
Admins can:
- View customer orders and bookings
- Change orders and bookings status
Super Admins can:
- Get all user information
- See all admins
- See all customers
- Update previleges for a user account
- Delete an account
This lists all individuals who have contributed to the development of this application. Their full names, links, and contact information are listed below:
Only members of the software engineering team can contribute to the source code. To report bugs and issues, or make feature requests, kindly send us a mail through our support page or directly at our support email [email protected].
Some project similar to ours include:
- wigwholesale.com
- wigsbyvanity.com
Copyright (c) 2023, WIG!T. All Rights Reserved
The code in this repository is not provided under an open source license. It is solely intended for internal use within WIG!T. If you wish to use this code or incorporate it into your own projects, please contact [email protected] to discuss licensing and obtain permission.