This is my graduation project as a front end engineer intern in Banque Misr (Digital Factory). This project was developed by one backend and three front end developers (web, android, and iOS). I was responsible for the web front end using Angular and Bootstrap.
Clothify-System is an online shopping website that allows users to browse, search, and purchase products. The website features a user-friendly interface, and an administration page that enables the management of products. The website also follows the color scheme and UI/UX principles of the other apps in the project. The project was developed using software engineering and SOLID principles. As a team, we followed the agile methodology and we got the best project in this internship in front end and one of the top three projects in the internship as a full project including backend and front end apps.
The website has the following features:
- Login screen: A user can login with email and password.
- Registration screen: New users can register using name, email and password.
- Home screen: The home screen has a bottom bar to switch between three screens:
- Products: List of available products. A user can filter, sort, and search for products by name, category, price, etc. A user can also view the details of a product and add it to the shopping cart.
- Shopping cart: List of selected products to be bought. A user can edit the quantity, remove items, or proceed to checkout.
- User profile: Display info of the user (name, email and password). A user can also edit their info or log out.
- Administration page: A page for managing products. Only authorized users can access this page. A user can add, edit, or delete products.
To install and run the project locally, you need to follow these steps:
- Clone or download the repository from GitHub.
- Install Node.js and npm on your machine.
- Navigate to the project folder and run
npm installto install the dependencies. - Run
ng serveto start the development server. - Open your browser and go to
http://localhost:4200to view the website.
To test the project and ensure its quality, I used Jasmine, Karma, and Protractor as testing tools and frameworks. You can run the following commands to execute the tests and view the results:
ng testto run unit tests with Karma.ng e2eto run end-to-end tests with Protractor.
This project was honored by Banque Misr (Digital Factory) as the best front end project and the full project was one of the top three projects in the internship. Here are some photos of the honoring ceremony:
I received a certificate of completion from Banque Misr (Digital Factory) for this project. Here is a photo of the certificate:
This project was developed by a frontend team of two members:
I would appreciate any feedback or suggestions for improving this project. You can contact me at 5aleda4rf@gmail.com or leave a comment on GitHub. Thank you for your interest in Clothify-System!
This project is licensed under the MIT License. This means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software, as long as you include the original license and a notice stating the changes that you made.