Saria Mirza
Saria Mirza

Engineer

Developer

Designer

Saria Mirza
Saria Mirza

Engineer

Developer

Designer

Menu

Alaa Cosmetics

See Demo

Overview

Alaa Cosmetics is a skin, body care retailer focused on clean, gentle ingredients serves girls and women of all ages looking to elevate their self-care routine and daily rituals. Their goal was to have a web application to sell cosmetics and have very specific characteristics to facilitate their success and sales. These characteristics tangibly increase the flow of users, who will then quite likely become buyers.

Technologies and Tools

  • Software Architecture: RESTful API
  • Back-end: TypeScript, NodeJS, NextJS
  • Database: MySQL
  • Front-end: TypeScript, NextJS, React, Tailwind CSS
  • Designing: Figma, Photoshop
  • Hosting and Deployment: Vercel, Cloudflare
  • IDE: VS Code

Role and Responsibilities

My role was a full-stack engineer and UI/UX designer.

  • Collaborated with clients to identify the requirements for the project to find the deliverables and scope of the work.
  • Created wireframes, high-fidelity designs, and prototyping using Figma and Photoshop to match the client’s needs.
  • Synced the design tokens from Figma to Tailwind CSS.
  • Transformed the design to ReactJS components and translated project requirements into functional code using.
  • Created responsive and adaptive user interfaces in Tailwind CSS
  • Created a detailed data model of the database, including all necessary logical and physical design elements, and documented this design as an ERD diagram.
  • Connected Next.js with MySQL database using Prisma to retrieve data in Next.js to make use of Static Site Generation (SSG) and Incremental Static Regeneration (ISR).
  • built the data layer and interact with API endpoints using React Query and Axios.
  • Built custom hooks for data fetching using React Query and ensured that SSR, ISR, and SSG worked perfectly. Optimized the UI/UX by providing local cache support.
  • Built cart component to serve as a virtual cart that allows customers to add and hold items until they complete the purchase. It accepts payments of customers and organizes and distributes all order information to the merchant, customer, and other relevant parties.
  • Set up and configured a PayPal payflow payment gateway to accept payments via PayPal or debit cards without ever leaving the webpage.
  • Delivering registration and login experiences. Enabled users to create accounts, use social providers, to federate easily with their identity provider.
  • Purchasing the domain name, managing the domain’s settings and nameservers to guarantee that the domain points to Vercel, installing an SSL certificate, and configuring Cloudflare as a reverse proxy.

Tours