SkinShine E-commerce Portefolio
Before I begin, I would like to thank all my classmates who encouraged me, as well as the staff at school.
Back in the day before I turned to web development, I was an independent contractor and had an online store. Due to the difficulties of the COVID-19 crisis period, working from home was the best way to earn a salary ^^.
I have spent a lot of time building my little online store; I tried many SaaS like shopify, Wix and Woo Commerce.
Having spent so much time building my website made me want to change my career direction and choose to be a web developer.
at Holberton after 1 year of studies (I started with a high level language until Devops)
It’s time for me to present my portfolio as the last project of these years of programming fundamentals.
Skinshine is an online store I developed based on NodeJs Angular Express and MongoDB.
I started this project by setting up my NodeJS workspace and shouting my api connected directly with my NoSQL database models (MongoDB) which I specified for my project also some very important models for an e-commerce project like products categories users orders. which I connected and stored on my databases.
After finishing my nodejs-mongoDB backend with the power of Framework Expressjs and the mongoose driver which made it easy to connect my nodejs server with my databases.
Then I moved on to my frontend where the real work begins.
I had a specific idea for the backend so I thought why not use Angular which is a very powerful framework based on typescrit.
this project schema is divided in two applications : an admin application and a SkinshineShop application
after two weeks of work on this project which is not completely finished (deployment and payment are missing)
you can find the complete project on my github.
The challenge I found is the first time in training as a developer I was using Angular and a 100% javascript server side all the project we used in our campus course was in Python.
in python that it is Django or Flask they are frameworks which are stable there is not
there is not a lot of change between the releases unlike angular and javascript there will always be movement and novelty for this rich language
for the style of this application I used primeng which is a UI composition library ready to use especially for angular besides I also used bootstrap also from SCSS
I have not completed everything but it is ready to use all the features but just for the time given by our school is short and is not enough especially I am building this project alone and it is a little not easy for my first time
currently I have made this project responsive for all devices
after several problems with my workspace since I used a monorepo environment that allowed me to configure my two administrative applications and SkinshineShop
It was necessary to reinstall several times the tools needed to compile my project.
Another problem I encountered is the one of logins and tokens that I unfortunately didn’t manage to solve for the moment but this is only the beginning of a specialization that I will start next year as a Full Stack developper at that time I will be able to build a webapp from the beginning to the end.
Features
In this project you can find, the following:
JWT Authentication and Authorization
Admin user: Super admin Role
Guest user: Can be used to buy without creating personal account
Normal users: Personal accounts users’s creat
Models: Products, Categories, Users, Reviews, Orders
Rest API’s by Role
Get, Add, update, delete
Admin can:
Get (Products, users, categories, orders),
Add (Products, users, categories),
Update (Products, users, categories),
Delete (Products, users, categories, reviews, orders)
Guest can:
Get (Products, categories),
Add (order),
Update (),
Delete ()
Normal User can:
Get (Products, categories, orders, user(Only himself) ),
Add (order),
Update ( user(Only himself) ),
Delete ()
Visitors with no account:
Get (Products, categories),
Add (),
Update (),
Delete ()
TO BE NOTED: the admin can not have access to the shop and buy products as an admin, it is denied from this functionnality, ans vice versa !
Architecture
The Project’s architecture is based on the MonoRepo NX Architecture:
One of the best things about NX is the ability to generate modules, services Libraries etc.. without CLI command. Quick Start & Documentation Of NX
Nx Documentation 10-minute video showing all Nx features Interactive Tutorial
The important things I did about the architecture of the project is avoiding the traditional way of Angular where every TS file is followed by its own CSS or SCSS file, instead i’ve created a global folder called Styles and placed all SCSS files inside with the same hierarchy, also i avoided generating Test file because i was focusing just on Developement without testing. Here is a clear idea about the architecture of the project:
Frontend
In the front end part I’ve used
- ANGULAR 14.5.7,
- typescript 4.7.2,
- Node v16.15.1,
- Npm 8.13.2,
- Nx 14.5.7
Backend
In the back end part I’ve used
- Node v16.15.1,
- Express JS 4.18.1,
- Npm 8.13.2,
- Nodemon 2.0.19
to finish it was a great experience it was just a little debriefing of my project at the end of my 1st year of study, I’m eager to start my specialization as a full stack developer.
