realme smartphone website (Demo)

This is a realme website project I created to demonstrate my HTML, CSS, SCSS, JavaScript /jQuery, Git/ Github and general web development skills. As a junior software Developer my main responsibilities would be:

1. Working with a UX/UI design team, Senior developer & SEO team alongside a existing web development team. Each responsible for managing, developing, maintaining, and supporting various web projects.

As a junior member, client briefs & project details will larging be all pre-determined. Meaning I won't be responsible for designing an entire website functionality.

Although I will be required to have a minimum understanding of design principles, example the difference between padding and margin.

My main responsibilities will be converting client briefs & project details into concept designs with the goal of reaching production and finally live service.

realme UK Website (Left) vs My Project (Right)

1. Please note that my demo website was built during the October Halloween Sale. Thus the real realme website will be different at the time of your viewing. (As seen below)

2. All images are in 4K resolution, click to enlarge for better viewing.

Project Context

As like most people we all have a smartphones. realme is a Chinese smartphone manufacturer and a subsidiary of BBK Electronics. For this project the smartphone manufacturer were seeking to build a UK version of their smartphone website.

I was included into the development team assigned for this project. Which was given a client brief, project details and a Adobe XD design file. These hypothetical details in this demo project is the actual realme UK website located here: https://www.realme.com/uk/

My Objective

My objective was to build a realme website following a design brief. Which is the current realme UK website.

More specifically converting wireframes and designs into functioning interfaces .

Although, I understand the different software development life cycles; agile , scrum and waterfall. For this demo project it would be difficult for me to display my knowledge of these development workflow methodologies.

Therefore, looking though my git commit submit history I tried to make clear documentation of each changes made throughout the development process.

realme 8 Pro Product Page (I created 1/2)

1. This is one of the product pages I created for my realme smartphone website Demo.

2. This is Mobile view of my realme smartphone website Demo.

As you can see they is multiple screenshots of the website. One is a product page image (left) and the rest is the landing page.

Lessons Learned

I learned a lot building this application more importantly git commit documentation. I was connecting from a branch into a main development repo and getting used to clearly documenting after every change I made was a learning process.

Alternatively, there’s a lot of other lessons a learned, but to mention a few:

1. JavaScript functions, HTML DOM and Browser BOM. (Specifically the product pages & product images & changing the product image colour for the correct product colour)
2. Creating a remote repository to learn a better development workflow process.
3. Using gitpage to deploy the website.
4. Responsive website using Bootstrap 5 class integration for mobile & tablet view-width breakpoints.
5. SCSS File Structure, _font.scss, color.scss etc. Creating separate SCSS files for different attributes for better CSS optimization.
6. Using Git operations to create a local repo. Also general git operations link, init, add, status, commit, remote, push and pull.

Improvements

Although my realme website Demo is functional and provides the minimum viable product of reflecting the real, realme UK website. They are tons of issues that still need improvement.

To mention a few:

1. The hero section images have a mobile version of the same images. However I cannot seem to load the mobile version images in a mobile view.
2. The footer section navigation links (Recommended, Support....) In the mobile view the user will have to click to reveal the links or to hide them. But I can't create the JavaScript function to execute that.
3. For all the product pages seen in the landing page. when it comes to the quantity amount. when increasing the quantity and decreasing it. I cannot display the correct price.
4. More Team-orientated Git operations specifically branch and merge this will initialize a more realistic team development workflow process.
5. The countdown feature/timer on all the sale sections doesn't work. (I don't know how to make one being honest)
6. Lastly, they are minor visual issues that honestly I have no solution to solve.

realme Buds Q2 Product Page (I created 2/2)

1. This is another one of the product pages I created for my realme smartphone website Demo.

Potential Future Features

1. To solve the current issues in the current iteration of this demo website.
2. Secondly to re-building the entire realme demo website with React and Node.js.
3. Implementing a checkout and product review page/section.

Deployment

Deployed with Github pages here. https://todd-owen-mpeli.github.io/realmeWebsite/src/index.html