UNIQ – Online Art Gallery
UNIQ is a modern e-commerce web application designed as an online gallery for art lovers and collectors. The platform allows users to browse and explore a curated collection of paintings with a clean, minimalist interface that highlights the artwork itself.
Technologies
- Express.js
- Angular
- Tailwind CSS
- TypeScript
- Custom API Data
- Stripe
Purpose
Built a complete Angular web application from scratch to strengthen my front-end development skills, gaining hands-on experience with components, services, and routing. The project simulates a real e-commerce environment, allowing users to browse products, interact with galleries, and complete purchases.
My Role
As a sole developer, I handled end-to-end development of the project, including front-end development with Angular and Tailwind CSS to build responsive user interfaces, back-end development by setting up a lightweight Express server with custom APIs, UI/UX design to create layouts that highlight artwork across devices, and payment integration using Stripe for secure online transactions.
Technologies Used
- Angular: Core front-end framework for building reusable components and managing state, and creating dynamic, responsive user interfaces.
- Express.jsLightweight backend server for creating custom APIs and handling data requests.
- Tailwind CSS: Utility-first framework for fast, responsive, and consistent styling.
- Custom API Data: Hand-built dataset to simulate real-world API integration and data handling.
- TypeScript: Strongly typed language used across the project to improve code reliability, readability, and maintainability.
- Stripe Payment: Integrated secure payment processing for a complete e-commerce experience.
Development and Thought Process
I approached the project like a real-world product, creating concise wireframes and artboards to plan and visualize the user journey. I structured the application with reusable Angular components for scalability, ensured full responsiveness across mobile, tablet, and desktop screens, and implemented key features such as item listings, product details, a shopping cart simulation, and secure payment processing.
Artboards and Features
Homepage: Showcases art products in three grid layouts with sorting (ascending/descending) and category-based filtering.
Cart Page: Supports adding and removing products, with a secure checkout flow integrated via Stripe.
Challenges
Angular: Coming from a React background, I had to adjust to Angular's @Input() and @Output() for parent-child data flow. Through practice and debugging, I gained a deeper understanding of Angular's architecture
Responsive Design: Ensuring layouts and animations worked seamlessly across devices was tricky due to style conflicts between Angular component CSS and Tailwind utilities. I overcame this by carefully managing style precedence, using a mix of Angular-specific styling and Tailwind classes, and testing layouts across screen sizes to ensure a consistent, responsive user experience.
Conclusion and Reflection
Completing UNIQ was a major milestone in my journey to master Angular. Successfully deploying the project provided hands-on experience with full-stack integration, including front-end and back-end development, as well as implementing Stripe for secure, real-world e-commerce transactions.
Next Steps
- Database: Connecting the app to a real database for dynamic product management.
- localStorage: Implement localStorage for persistent cart functionality.
- Searching: Add search bar to enhance the browsing experience.