1. Details Overview

1.1 format specification

Assignment 1	front-end and back-end separation contacts programming
Course	EE308
Name	Lu Yang
Student ID	832301123(FZU) 23132604(MU)
Assignment Requirements	Front-end and Back-end Separation Contacts Programming, achieving some basic functions without limitations on code and platform
Objectives of This Assignment	This assignment requires a contacts management solution with a decoupled frontend-backend architecture, supporting core functions for adding, editing, and deleting contacts without imposing technical constraints.
Other References
Frontend	JavaScript MDN Documentation, CSS3 Specifications
Backend	Node.js Official Documentation, Express.js API Reference
Data Storage	JSON Format Specification, File System API
Web Standards	HTML5 Specification, RESTful API Design Principles

1.2 PSP table

PSP Phase	Task Description	Estimated Time (minutes)	Actual Time (minutes)	Difference (minutes)
Planning		30	25	-5
• Requirements Analysis	Analyze project requirements and specifications	15	12	-3
• Technical Research	Research and select appropriate technologies	15	13	-2
Development		240	280	+40
• Frontend UI Design	Design and implement user interface components	60	75	+15
• Frontend Logic	Implement JavaScript functionality and event handling	90	100	+10
• Backend API Development	Create Express server and RESTful endpoints	60	70	+10
• Data Persistence	Implement JSON file storage system	30	35	+5
Testing		60	50	-10
• Functional Testing	Test all CRUD operations and edge cases	40	35	-5
• Deployment Testing	Verify deployment and cloud functionality	20	15	-5
Documentation		90	80	-10
• Technical Documentation	Write code comments and API documentation	50	45	-5
• User Documentation	Create user guides and deployment instructions	40	35	-5
Total		420	435	+15

2. Address

2.1 GitHub repository address

        Frontend: https://github.com/Brandy666666/contacts-frontend

        backend: https://github.com/Brandy666666/contacts-backend

2.2 Project deployment link

        Web link: https://brandy666666.github.io/contact-app/

3. Function Demonstration

3.1 add contacts

The name field and the phone number field display prompts when no content is entered, and there is the message "No contacts found. Please add the first contact."

After entering the information, click the button to add the contact.        

The contact icon displays the capital letter at the beginning of the name, which makes it easier to quickly locate the information.

Input of information is necessary; otherwise, an error message will pop up.

When the phone number entered by the user is less than three digits, an error message will be displayed.

3.2 modify

After clicking the "Edit" button, you can perform editing operations in the input box.

The editing operation allows you to choose to save or cancel from the right side.

3.3 delete

If the edited contact is deleted, the editing mode will automatically exit.

The red marking of the delete key is different from that of the edit key, which helps to reduce accidental touches.

After clicking the "Delete" button, a confirmation prompt will appear. Click "OK" to delete or click the "Cancel" button to cancel the operation.

4. Functional structure diagram

If you can't see it clearly, try the simplified version.

5. The design and implementation process

       (design stage)

5.1 demand analysis

Core Function: 

• Contact person addition, deletion, modification and search 
• Form validation 
• Data persistence
• Responsive interface

5.2 technical framework

• Frontend: HTML + CSS + Native JS
• Backend: Express.js + File Storage
• Data: JSON File        

5.3 file structure  

      (implementation phase)

5.4: Backend Setup

• Configuration of the Post-Express Server

• RESTful API Design

• File storage system

5.5: Front-end Development

• Responsive interface design

• CSS variable system

• Componentized style

5.6: Componentized Style for Interaction Logic

• DOM operation management

• API communication encapsulation

• Form processing system

• the mechanism of error processing

5.7: Integration Optimization

• Integration of front-end and back-end data flows

• User Experience Optimization

• Code quality assurance 

6. Analysis of Key Code

6.1 Back-end core code (server.js)

Design thought：

• Choose file storage instead of a database to reduce complexity.

• Each operation involves reading and writing files to ensure real-time data availability. 

• RESTful API design with clear semantics

6.2 Front-end styling system (style.css)

design thought：

• CSS variables establish a design system, making it easier to maintain.

• Modern frosted gradient background

• Micro-interactions enhance user experience

• Responsive breakpoint adaptation for mobile devices

6.3 Front-end core logic (app.js)

key characteristic：

• fetchContacts(): Encapsulate API calls and implement unified error handling

• escapeHtml(): XSS protection, escaping special characters

• Avatar generation: Use the first letter of the name, gracefully handle null values

• Empty state handling: Friendly "No Contacts Available" prompt

• State consistency check: If the edited contact is deleted, automatically exit the editing mode. Form processing and validation

7. Personal Insights and Achievements

7.1 Improvement of technical capabilities

By developing the contact list system, I mastered the front-end and back-end separation architecture. I used native JavaScript to implement DOM operations and asynchronous programming, utilized CSS variables to build the design system, and gained a deep understanding of RESTful API design.  

7.2 User experience optimization

Emphasize on the design of interaction details, implement functions such as form auto-focusing, operation confirmation, and intelligent prompts.

7.3 Overall growth and achievements

This project comprehensively enhanced my full-stack development skills, covering aspects such as technical implementation, engineering thinking, code quality, and user experience, laying a solid foundation for subsequent development of complex applications.