Positive Quotes App
Positive Quotes App is the TFE project I created during the final year of my Frontend Developer programme. It is an Angular application built with TypeScript, Angular Material and SCSS, designed to help users discover, save and revisit motivational quotes through a calm and focused interface.
The project now includes a controlled public demo experience. Public registration is closed, and visitors can explore the application through a one-click Continue as Demo option. Demo favorites and quote history are limited and temporary, while the private owner account remains available for full personal use.
Technologies & Tools Used
Creative & UI Tools
Created the logo and simple visual identity elements.
Prepared and adjusted visual assets and background images.
Planned the interface, screens and user flow.
Frontend & Demo Experience
Built the application structure with Angular and Angular Material.
Implemented application logic, user flows and typed components.
Styled the interface with SCSS, including dark and light theme layouts.
Managed demo interaction logic for quotes, favorites and quote history.
Explore Positive Quotes App through the live preview. Use the Continue as Demo option to browse quotes by category, save a limited number of favorites, view temporary quote history and switch between dark and light themes.
The demo mode is intentionally controlled for public portfolio visitors. It allows the application to be tested without creating a personal account, while keeping the owner account private.
View the full codebase on GitHub to explore the Angular structure, TypeScript logic, Angular Material components, SCSS styling, theme handling and controlled demo flow.
Display Prototype on Figma
Explore the interface planning and user flow behind Positive Quotes App by viewing the Figma prototype.
Creation Process
Positive Quotes App was developed as a final-year frontend project with a focus on building a complete Angular application: interface design, component structure, user actions, demo access, data handling and responsive visual presentation.
Concept & UI Direction
Defined the visual direction around calm, positive and nature-inspired imagery, with dark and light theme variations to give users a personalized experience.
Prototype & User Flow
Used Figma to plan key screens such as login, demo access, home, favorites, history and account settings before implementation.
Angular Implementation
Built the app with Angular, Angular Material and TypeScript, organizing the interface into reusable components and pages.
Controlled Demo Logic
Implemented a controlled demo experience with limited favorites and temporary quote history for public visitors, while keeping private owner access separate from the public portfolio demo.
Features
Positive Quotes App includes practical frontend application features: controlled demo access, quote categories, favorites, history, theme switching, account settings and dynamic background images.
Controlled Demo Access
Visitors can use the app through a one-click Continue as Demo option without creating an account. Public registration is closed to keep the portfolio demo clean and controlled.
Quote Categories & API Data
Quotes can be browsed by category, with quote content loaded from an API and displayed in a clean, focused interface.
Limited Favorites
Demo visitors can save a limited number of favorite quotes and revisit them during the demo experience.
Temporary Quote History
The demo experience keeps a limited history of viewed quotes, allowing visitors to return to quotes they have already explored.
Dark & Light Themes
Users can switch between dark and light themes, changing the visual atmosphere of the application.
Dynamic Background Images
Background images change through an API when pages are refreshed, giving the interface a more atmospheric and varied experience.