System Requirements Document (SRD) for mango-project

1. Introduction

The mango-project is a Portfolio Builder App designed to help users create, customize, and publish professional portfolio websites. This project is tailored to showcase your frontend development skills using HTML, CSS, JavaScript, and Bootstrap. It is crafted to be a standout addition to your resume and LinkedIn profile, demonstrating your ability to design responsive, interactive, and user-friendly web applications.

This document outlines the system requirements, user personas, and technical details necessary to develop the mango-project. The goal is to create a powerful, real-world application that impresses recruiters and hiring managers.

2. System Overview

The mango-project is a web-based application that enables users to build and customize their own portfolio websites. The system will provide multiple responsive templates, a live preview feature, and an export option to download the portfolio as a ZIP file. The application will focus on delivering a seamless user experience with interactive design elements and smooth animations.

Key features include:

• User-friendly interface for creating and editing portfolios.
• Responsive templates powered by Bootstrap.
• Real-time live preview of changes.
• Export functionality for downloading portfolios.
• Interactive design elements like collapsible sections and modals.

The mango-project is designed to be intuitive and accessible, ensuring users can create professional portfolios without requiring advanced technical knowledge.

3. Functional Requirements

• As a User, I should be able to register and log in to the application.
• As a User, I should be able to select from multiple responsive portfolio templates.
• As a User, I should be able to add, edit, and delete sections in my portfolio (e.g., About Me, Projects, Skills, Contact).
• As a User, I should be able to upload my profile picture and other images to the portfolio.
• As a User, I should be able to preview my portfolio in real-time as I make changes.
• As a User, I should be able to customize the color scheme and fonts of my portfolio.
• As a User, I should be able to save my portfolio progress and return to edit it later.
• As a User, I should be able to export my portfolio as a ZIP file containing HTML, CSS, and JS files.
• As a User, I should be able to view smooth animations and transitions while interacting with the app.
• As a User, I should be able to access the application on both desktop and mobile devices.

4. User Personas

1. User

• Description: A job seeker or student looking to create a professional portfolio to showcase their skills and projects.
• Goals: Build a visually appealing and responsive portfolio quickly and easily.
• Pain Points: Lack of technical knowledge to design a portfolio from scratch.

2. Admin

• Description: The system administrator responsible for managing templates and ensuring the application runs smoothly.
• Goals: Maintain the system, update templates, and troubleshoot user issues.
• Pain Points: Ensuring the system remains bug-free and up-to-date.

5. Visuals Colors and Theme

The mango-project will use a vibrant and professional color palette to ensure the application is visually appealing and modern. The colors are designed to evoke creativity, professionalism, and trust.

• Background: #F9F9F9 (light gray)
• Surface: #FFFFFF (white)
• Text: #333333 (dark gray)
• Accent: #FF6F61 (vivid coral)
• Muted Tones: #B0BEC5 (soft blue-gray)

These colors will be applied consistently across the application to maintain a cohesive and polished look.

6. Signature Design Concept

The mango-project will feature a Dynamic Live Preview Canvas as its signature design concept.

Concept Details:

• The homepage will include an interactive canvas where users can see a real-time preview of their portfolio as they make changes.
• The preview will update instantly with smooth transitions, showing how the portfolio will look on both desktop and mobile devices.
• Users can drag and drop sections (e.g., About Me, Projects) directly onto the canvas, which will animate into place with a snap-to-grid effect.
• The canvas will feature split-screen functionality, allowing users to edit content on one side while viewing the live preview on the other.
• Subtle animations, such as fading in text and sliding images, will enhance the user experience.
• The canvas will include a toggle button to switch between light and dark mode, giving users more customization options.

This dynamic and interactive design will make the mango-project stand out as a cutting-edge portfolio builder.

7. Non-Functional Requirements

• The application should load within 3 seconds on a standard broadband connection.
• The system should support all modern browsers (Chrome, Firefox, Edge, Safari).
• The application should be responsive and function seamlessly on devices with screen sizes ranging from 320px to 1920px.
• The system should handle up to 10,000 concurrent users without performance degradation.
• All user data should be securely stored and encrypted.
• The application should comply with accessibility standards (WCAG 2.1).

8. Tech Stack

Frontend

• HTML, CSS, JavaScript
• Bootstrap for responsive design

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

Local Orchestration

• Docker
• docker-compose

9. Assumptions and Constraints

Assumptions

• Users will have basic knowledge of uploading images and filling out forms.
• The application will primarily be used by individuals in India (IN), so the default timezone will be IST (Indian Standard Time).

Constraints

• The project will only use HTML, CSS, JavaScript, and Bootstrap for the frontend.
• The system must be lightweight and optimized for performance on low-end devices.

10. Glossary

• Portfolio: A personal website showcasing an individual's skills, projects, and achievements.
• Responsive Design: A design approach that ensures the application looks and functions well on devices of all sizes.
• Bootstrap: A popular CSS framework for building responsive and mobile-first websites.
• Live Preview: A feature that allows users to see real-time updates to their portfolio as they make changes.
• Export: The ability to download the portfolio as a ZIP file containing all necessary files for hosting.