Piggyvest Website Clone
Sidehustle Portfolio-Frontend-Html-Css-Js-Team-4 blog's

Piggyvest Website Clone Sidehustle Portfolio-Frontend-Html-Css-Js-Team-4 blog's

Table of contents

Welcome to frontend team 4 blog, which consist of some talented individuals that have been task with the job of clonning the Landing pages, sign up, and registered page of Piggyvest piggyvest.com Piggyvest (formerly piggybank.ng) which is a leading online savings & investing platform in Nigeria that as over 6 year of experience in the Financial Industry.

INTRODUCTION

Developing a web product or in our case, a website comprises several steps which work together to ensure the smooth inception and finishing of the project. A web product or a website comprises documents which are read by the browser and displayed on the screen for the end user. There are many paths which can be taken by the user in order to reach the end goal which is delivering a working product hosted online which can then be consumed by the end users. All of them categorically follow the same principle which are listed below

  1. Types of websites to create.
  2. Creation options for the product / website.
  3. Webpages
  4. Content and design
  5. Hosting and Domain Name
  6. SEO
  7. Web Analytics

The team involve in carrying out this task are people from different fields of work like, Graphic Designers, frontend and backend developer, Digital marketers, and many more.

In other to make this possible, we chose two member as our team lead and assist, the team went ahead to study, analyze and understand the type of product that was to be delivered. The problem was scrutinized and a solution was adopted by the members of the team for the product, the team lead created a Whats'App group for easy communication because majority of us are not familiar with Slack, three group was created. the first group took up the designing of the landing page, the second group work on the sign up, and the third group is to create the registration page.

The next step involves the analysis of the available options to create the cloned website. It is adopted that the project will be carried out using HTML, CSS, Bootstrap and JavaScript. The project was divided into smaller chunks within the group created

The team leads went ahead to create a Github Repository for the project and granted other member access to the repo by taking each members Github username for easy collaboration to push/pull their work there.

The next step involves sourcing contents that will be used in the execution of the project like images, fonts, text, compilers, color picker, bootstrap, w3school css content, etc. The main font of the website was discovered to be ‘DM Sans’. The contents were downloaded and uploaded on the git repo for everyone to pick and work on their part of the project

Next, the designing of the project commenced and strict compliance with the design patterns was ensured. The correct color management, spacing, fonts, buttons, menus were used during the execution of the project. The project responsiveness was tested on various devices like desktops, laptops, tabs, ipads, iphones and android phones to ensure that they appear correctly on those devices.

Finally, after rigorous testing, the final project was deployed to github and was finally hosted online using the Netlify free hosting service.The last two steps which are relevant but unfortunately not incorporated in the project are SEO and web analytics. The reason for their exclusion is because the project is not a viable commercial product since it is a clone of an existing product.

Main Landing page of PiggyVest Main LP.PNG Clone Landing page Landing Page on Desktop.PNG Main Login page of PiggyVest Main SP.PNG Clone Login Page Login Page.PNG Main Register page of PiggyVest Main RG.PNG Clone Register Page Reg1.PNG Main Register page of PiggyVest Main RG DW.PNG Clone Register Page Reg2.PNG

Mobile Responsiveness Main Page phone Screenshot_20220612-001036_Chrome.jpg Main Page Clone Screenshot_20220611-204823_Code Editor.jpg Main Login page phone Screenshot_20220612-001059_Chrome.jpg MainLogin Page Clone Screenshot_20220611-141105_Code Editor.jpg Main register page Phone Screenshot_20220612-001110_Chrome.jpg Register Page Clone Screenshot_20220611-142002_Code Editor.jpg