// WEB
Urban Edge CMS
A full-stack furniture platform with an admin CMS, user authentication, product browsing, and bookmarking.
Overview
Urban Edge CMS is a full-stack furniture platform that I built to explore how a complete web application works from the frontend to the backend and database.
The project has two main parts: an admin CMS for managing products and a user-facing application for browsin and saving products.
I wanted to use the project to get more hands-on experience with Vue.js, state management with Pinia, and automated testing with Jest.
Architecture
The project consists of two primary clients and one backend server.
Admin CMS
The admin CMS provides CRUD functionality for managing furniture products.
Administrators can:
- Create products
- View products
- Update products
- Delete products
- Manage the content displayed by the public website
Public Website
The user-facing application provides an interactive furniture browsing experience.
Users can:
- Log in & Create an account
- Browse furniture products
- View product information
- Add products to their bookmarks
- Remove products from their bookmarks
Technical approach
The project focused on:
- Building the frontend with Vue.js
- Managing application state with Pinia
- Styling the interface with Tailwind CSS
- Building backend services with Expressjs
- Using Sequelize for database interaction
- Using PostgreSQL for relational data
- Integrating authentication with Google Auth
- Using Axios for HTTP communication
- Testing server functionality with Jest
- Deploying backend services with Google App Engine
- Hosting the web client with Firebase Hosting
- Using Supabase to host and manage the PostgreSQL database
Admin CMS Preview
Public Website Preview
Authentication
The public website includes an authentication flow allowing users to create accounts and log in before accessing user-specific functionality such as bookmarks.
Deployment
The project was deployed across multiple services:
- Backend: Google App Engine
- Frontend: Firebase Hosting
- Database: Supabase (PostgreSQL)
Lessons learned
This was a good project for getting more comfortable with full-stack development. I got to work with Vue, Express, databases, authentication, testing, and deployment all in one project.
It was also useful to see how the admin side and public or user-facing side of an application can work together through the same backend and database.