Quick24

A JavaScript web application developed as a university project, focused on product and offer display, user administration, modular frontend structure, and JSON-based data handling.

Overview

Quick24 was developed as part of a university assignment based on predefined project requirements. The goal was to implement a structured web application using JavaScript, HTML, SCSS, Webpack, fetch API, JSON data, and MVC-style organization.

The project demonstrates frontend application structure, reusable UI components, dynamic data loading, and basic administration workflows.

My Role

Role: Frontend Developer / University Project Developer

Responsibilities included:

• Implementing the application based on professor-defined requirements
• Structuring the project using MVC-style architecture
• Building dynamic UI components
• Loading and handling JSON-based data
• Configuring Webpack for development and production builds
• Writing SCSS/CSS styles for the user interface

Key Features

• Product and offer display
• Dynamic data loading using fetch API
• JSON-based data handling
• User administration interface
• Modular JavaScript structure
• MVC-style project organization
• Webpack development and production build configuration
• SCSS-based styling

Tech Stack

• Languages: JavaScript, HTML, CSS/SCSS
• Build Tool: Webpack
• Data Handling: fetch API, JSON
• Development Server: JSON Server
• Architecture: MVC-style frontend structure

Project Structure

Quick24/
├── dist/
├── src/
├── database_data.json
├── package.json
├── webpack.config.js
└── stylelintrc.json

Available Scripts

Install dependencies:

npm install

Run JSON Server:

npm run server

Build development version:

npm run build

Build production version:

npm run prod

Watch files during development:

npm run watch

What I Learned

This project helped me improve practical frontend development skills, including:

• Structuring JavaScript projects
• Working with Webpack
• Handling JSON data through fetch API
• Building reusable UI components
• Organizing code using MVC-style separation
• Creating SCSS-based layouts and components

Status

Completed university project.