Mind-Spa NG is currently carrying an in-house training assessment for its development team. This repository will be used to test the growth of our frontend team members.
Take a close look at this UI: https://www.lapa.ninja/post/cosmos-network/ and replicate its design in your web-app alongside a few modifications you decide to make with the following technologies: HTML5, SCSS, Bootstrap4 and JavaScript. It is important that you make use of VScode during this process. Pictures and icons can be sourced from the following places: Unsplash, Pexels, Bootstrap Icons etc. (Website flow can be viewed using: https://cosmos.network/?ref=lapaninja)
The requirements specified for this project have been divided into two; the functional requirements and the non-functional requirements.
A Functional requirement is a list of the functionalities of the application i.e. it is a detailed list of what the application is expected to do. It comprises the functions that must be present in a system.
| Req. No. | Stakeholder | Title | Description |
|---|---|---|---|
| F-101 | Client | Responsiveness | The landing page shall be responsive across all screen types so that customers can easily access the web app from different screen sizes. |
| F-102 | Client | Sign Up User Authentication | The sign up section shall have a pop-up sign up sequence that authenticates the user. |
| F-103 | Client | Sign In User Authentication | The sign in section shall have a pop-up sign in sequence that authenticates the user. |
| F-104 | Client | Sign In and Sign Up Functionality | The sign in and sign up functionality shall not authenticate if the user does not input all required details into the necessary text fields. |
| F-105 | Team Lead | CSS | The code shall have SCSS variables, mixins and other functionalities that will reduce redundant CSS code. |
The non-functional requirements state the operations that are needed to enhance the performance of the application. These requirements assist the overall implementation of the system thus making the system usable and increasing the performance and security
| Req. No. | Stakeholder | Title | Description |
|---|---|---|---|
| NF-101 | Client | Page Composition | The landing page shall have a nav-bar containing the logo and a learn, build, explore, sign in and sign up sections for easy navigation. |
| NF-102 | Client | Image Quality | Image quality shall be reduced so that the web application loads faster. |
| NF-103 | Client | Sign In and Sign Up Functionality Error | The error received when the sign in or sign up functionality fails to authenticate shall clearly indicate the error in terms customers can easily understand in a pop up. |
| NF-104 | Client | Sign In and Sign Up Functionality Success | The message received when the sign in or sign up functionality authenticates shall be in form of a pop-up which will clearly indicate the success message to the customers in ways they can easily understand. |
| NF-105 | Product Manager | Github Commits | Commits shall be made to GitHub for easy follow through with the entire building phase of this project. |
| NF-106 | Team Lead | Font Type | The application shall use poppins font specifically imported from Google fonts so that the entire site will read better. |
| NF-107 | Team Lead | LInk Dependencies | All CSS files (Bootstrap 4 & SCSS) shall be linked to the html page to make development faster. |
| NF-108 | Product Manager | Live Link | A live link to application shall be provided on github page. |
| NF-109 | Product Manager | Documentation | A proper documentation shall be provided in the README.md file of the github repository. |
| NF-110 | Team Lead | Github Descriptions | A well labelled Github description shall be provided with every new push or pull. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent