·Foundations ALX School — Portfolio project
6 min read·NOV 09, 2023
E-COMMERCE WEBSITE
The purpose of my project
The project aimed to create an E-commerce Website where clients/customers can order an item and have it delivered to them, that way we can provide them with solutions to make their lives easier.
This project was initiated by the association May’Human Lab of Laval in Mayenne(53).
The team
Just me, Omokpamwan Osariemen (24 years old). I started the foundations in COHORT10 2022, but I deferred to Cohort 12 due to other factors. My hobbies are photography, listening to music, dancing laughing at jokes, spending time with close family and programming.
The roles
My roles are programming, designing planning and meeting. I worked with TECH2etc to check the steps of my development.
The different steps are :
specifications
mockups
programming
landing page
documentation
The timeline
In the first week, I prepared my environment of work by installing REACT and reading information about it. Then, I created the header and navbar menu of the website
Week 1
The second week, I began the development front end. I would like a minimum visual presentation for the meeting with TECHetc. And then I created the feature section.
Week 2
In the third week, I did the New Arrival and newsletter section. I implemented a feature where users can add new items.
Week 3
Last week, I made it responsive for both large-screen and mobile device using javascript.
Week 4
Created for
The project was created for easy buying from an E-commerce website that is reliable and efficient.
My personal focus
My focus was to build and deploy an E-commerce website using HTML, CSS, JAVASCRIPT and also REACT framework. I enjoyed building this and it was my great challenge.
I chose React because is popular and offers tons of libraries and tools for common use cases (authentication, HTML templating, URL routing, forms, view layers, model layers). Then, React offers a fully-featured web interface for the admin panel. Finally, there is very good documentation with example code which is very helpful in building some features.
The story
First, I have been wanting to build a project since I transitioned into tech. I have been watching tons of YouTube tutorial videos before now and when we were asked to build a project, I told myself that this would be a great idea and the perfect opportunity to build a project based on what I have learned. I would like to make a responsive E-commerce website
Knowing that practice makes perfect, I decided to read the specifications and thought that it was a good idea to build my first website.
Finally, I met Fabien Cacheux of May’Human Lab. A beautiful adventure began.
The technology
For creating this website I used for the backend the language Javascript, the framework React and the SQLlite database by default. For the front end, I used HTML and CSS with different templates.
Then, I used some tools for example Trello to plan and handle my work, git and Git Hub for hosting my code and then the IDE VSCODE to write my code.
The architecture
The architecture of an E-commerce project is like this :
E-commerce architecture
Designing an E-commerce website covers a lot of topics such as user interface, database, physical, logical, architectural and scalability design.
Note: I might have missed any please let me know in the comments.
- First, get some overall view of E-commerce since it's a broad topic we can't able to explain all and read the problem.
a. E-commerce applications should allow users to search for products.
b. E-commerce applications should list the products in different views like by category, by ratings, by trending, etc
c. Users should able to view the product descriptions, images and reviews of other users.
d. Users should be able to provide reviews and ratings for their purchase
e. Users should be able to ask Q&A regarding products and
f. Users should able to add products to their cart and checkout
The main features
The first feature is the homepage where all the NAVBAR. The interface allows users to navigate to any features that they want. The user can show more details about the request and can update a request.
List request (Applicant profile)
The second feature is the new arrival feature, where customers get to see new items being updated.
Create a request (Applicant profile)
The third feature is the Newsletter section, where customers get to input their mail and get notified of any new updates.
The most difficult technical challenge
The most difficult part of my project was how to implement functionality and the database, it was draining. React gives us a library to handle a user.
My process, first I search for some information. I found two main articles and I tried to implement both of them but it wasn’t a success. The problem was in the creation of the database and creating conflict with the ID. I tried to solve this problem for two days.
Then, I did a pause on this feature. I come back on it after a few days. I searched for new resources and I’m going on a video tutorial. And this new method works. The difference is on the override of the function save and using the decorator @transaction.atomic. This decorator handles errors when data are saved in the database.
This function save is very important because is in it where I define the type of user. When I solved this step, everything went well.
What I’ve learned
I have learned to plan my work and estimate my time. It was a thing that I feared. I was uncertain about myself and afraid of not being able to answer the need.
Next, this project confirms my choice of specialization: full stack.
Next, I’m able to learn a new technology with complete autonomy (like React here).
I confirm, that I love programming and I’m so proud of myself when I see the result of this project.
Maybe, if I had more time, I would like to learn more about Javascript. This is my only regret.
Links to the project
I am sharing with you some links on :
- Github project: https://github.com/tech2etc/Build-and-Deploy-Ecommerce-Website
About me
I finished the first year at ALX COHORT12 Then, I’m going on an internship for three months and then I will begin the specialization of Web Full Stack.
Thanks Mentor and ALX Staff for their accompany and my peers for the motivation during this year.
My github: https://github.com/giftosas