TINA LOMAN

Menu

Eleganza Violin Studio

A Music E-commerce Site Selling Violin Instruments, Accessories & Lessons

Role

Full-stack Web Developer

Project Leader

UI Designer

Type & Deliverables

Full-stack Web Development

Web UI Design

Timeline & Unit

Jan. – May. 2024

Tool

Front-end: Javascript, React.js, HTML, CSS, Bootstrap

Back-end: Node.js, MySQL

Version Control: Git, Github

UI Design: Figma

Team

Wu Rongxuan,  Lin Jing, Lin Yixin, He Zonglun, and me

Unit
iSpan International Inc.

Also, the complete code & database of this project can be seen in my Github (click me)

Project Introduction

Eleganza, meaning “elegant” in Italian, embodies a violin music studio that offers a range of violin-related products and lessons catering to both novices and advanced violin learners and lovers. 

Project Goal

  • Optimizing the Course Booking Experience

    • Our individual instruction courses have a great reputation. To address booking difficulties, we have introduced a calendar reservation system on the “Lesson” page, allowing students to book individual lessons with teachers and adjust the schedule flexibly.
    • Group classes can also be signed up for through our online registration system.

  • Catering to Different Customer Needs

    • The services are not limited to professional classical music enthusiasts; we aim to introduce more people to the art of the violin.
    • On the “Home” page, I designed the content to provide a violin component introduction with pircures to introduce how to choose a violin and the craft of violin making, helping customers find their ideal violin and course.

  • Increasing Exposure of Violin Art-Related Information

    • We connect local and international masterclasses, performances, and music lectures.
    • These activities are promoted on the “Home,” “Article” pages, simplifying the participation process and cost.
    • Through online dissemination, we aim to introduce more people to classical violin art.
Key Achievement

  • Front-End Development (React.js):

    • Developed registration, login, and user profile features.

  • Back-End Development (Node.js):

    • Built routes for user profile functionality and integrated user data tables.

  • Responsive Web Design (RWD):

    • Designed and implemented responsive layouts for registration, login, contact forms, and the user profile section.

  • UI/UX Design (Figma):

    • Created the entire website’s UI design and layout, leveraging a user-centric approach informed by a strong background in music to enhance the overall experience.

  • Proposal Writing and Graphic Design:

    • Authored project proposals and designed polished presentation materials.

  • Project Coordination and Management:

    • Oversaw project progress, ensuring timely completion and alignment with goals.
Menu
Development Process
The development follows a modular development approach with version control using Git and GitHub.
1. UI Design

- Designed design system and UI via Figma
- Confirmed web content and information architecture with a UX mindset

2. Static Layout Development

- Developed UI layout with HTML5 & CSS3
- Prepared layout for integration into React/Next.js framework
- Implemented Responsive Web Design (RWD)

3. Interactive Layout Developemnt

- Used JSX and hooks in React to develop static and interactive pages
- Developed mobile version pages

4. Server & API Setup

- Developed a back-end system using Node.js with the Express.js framework
- Adhered to the RESTful API architecture
- Implemented API consumption in front-end pages

5.Integration Debugging

- Integrated the back-end with the front-end in each developer's parts
- Ensured seamless communication through API endpoints
- Facilitated efficient data exchange between the client and server

6. Launch

- Delivered after testing & debugging

Web UI Design

As one of two UI Designers, I co-created the website’s design system, opting for Serif typefaces for titles, including the logo, sans-serif as paragraph text, and utilizing grayscale as primary and secondary colors. This choice reflects the elegance and sophistication of classical music. 

Design System & Rationale
Brand Color
Primary Color​
Text Color
Secondary Color​
Accent & Danger Color

Using violin wood tones as the
brand color, low-saturation shades
create an elegant style and enhance the
website’s quality, serving as both text and
background colors.

Typeface
Noto Serif TC
Noto Sans
Logo
Playfair Display as the primary font for the brand logo imparts a classic and elegant feel. Careful letter spacing enhances readability and creates a refined, noble image for the brand.
H1 阿爾扎
H2 阿爾扎
H3 阿爾扎
H4 阿爾扎
H5 阿爾扎

P 阿爾扎

Component

I led the design of headers and footers for both mobile and desktop devices, as well as elements and RWD pages for the homepage, teacher, and lesson pages.

Header, Footer and Lesson Pages Design by Me
Button
#Javascript
#React.js
#Node.js

Button status respectively: Default, Hover and Disabled 

Header and Footer in Mobile Device
Web Development
Core Features & Impact

The complete code & database of this project can be seen in my Github (click me).

Below is the final presentation of this project, While it is in Chinese, it showcases the complete features and highlights each developer’s contributions.

Click on the Timestamps to Jump to Specific Features:
  • User Management System: Start (developed and extra recorded by me in English below).
  • Homepage & Product: 9:40
  • Article Page: 16:16
  • Teacher Page: 19:03
  • Shopping Cart: 21:47
1. a. User Management System
  •  Technical Impact: Implemented JWT-based authentication to ensure user data security, optimizing authentication performance to handle each request in just 100 milliseconds.
  • User Impact: Provided users with a smooth and secure login and registration experience, simulating a real-world web application.
  • Technical Growth: Gained a deeper understanding of API interaction between React and Node.js.
  • Potential Improvement: Explore alternative methods such as using cookies or other secure storage techniques. Storing user login session data temporarily in localStorage may not be sufficiently secure.
Used React hooks to validate user data from back-end system and database, maintaining login status across pages
By setting up JWT in local storage and logging status when logging in at both back and front- end's pages, ensuring consistent user authentication across the entire web.
Register Form
Login-in Form
b. Register & Login-in Forms:

Both the registration and login forms are designed as
overlaid off-canvas can be triggered by the click on profile icon on the the header; they are configured with regular expressions and form validations to ensure users follow specific rules when creating accounts. The password strength bar uses the react-password-strength-bar component to assist in setting secure passwords.

Order History Page
c. Account Center: Order History & My Lesson

In the account center, additional pages display users’ order history and purchased lesson data. By detecting users’ login status, the account center dynamically updates to reflect any actions taken by users, such as placing orders or
leaving comments.

My Lesson Page: Reminders for Scheduled Lessons
Profile Page in Mobile Version
Profile Page: Users can Add or Modify their Personal/Account Info by Editing the Fileld Content
d. Account Center: Profile Data Reading & Updating

On the profile page, users can update their profile information at any time by changing
the values in the fields and clicking the save button. During registration, fields like Display
Name and Name, which are not required, can be added later in the profile section. This
allows the updated Display Name to appear in the side navigation menu. The phone
number and password fields are set with regular expressions to ensure only specific
formats are accepted, ensuring data security and accuracy. Red characters is logout.

2. Lesson Pre-scheduling 19:03

Product and lesson pages share several common features, such as tabs for different categories, checkbox filters for specific traits, pagination, a search bar, price sorting, post-order comment sections, and breadcrumb navigation for easy site navigation.

In addition, the lesson page includes unique features like a calendar and slot selectors, enabling users to schedule lessons seamlessly.

Lesson Page: Calendar Selector, Filters, Sorting, Pagination, Search Bar, Tabs, and Card-Style Lesson Display

The course list displays instructors and start dates, with filters for categories, date, experience, and music style. Users can select a continuous date range on the calendar to view available courses during that period.

  • Sorting is by price (high to low).
  • Search is by course name.

Instrument lessons are typically one-on-one, making exclusive slot selection a key feature. On the course detail page, users can view details, select slots, and book easily. Non-members are prompted to log in before adding to the cart.

Lesson Detail Page: Users Can Select a Slot That Fits Both the Instructor’s and Their Availability
3. Shopping Cart 21:47

The cart page uses animations for transitions and completes the checkout process. Users can adjust item quantities on the confirmation page, with items automatically removed if the quantity is less than one. Payment details are displayed in an accordion style. Refreshing the page allows quantity adjustments. After a successful purchase, the order summary and ID are shown, with options to continue shopping or view order history.

Shopping Items Confirmation Page
Fill in Contact Info, Shipment and Payment Methods
Order Summary after the Completion of Purchase
4. Teacher List, Article Page and Homepage

Focused on Information Display, the goal is to equip both novice and advanced users with the knowledge needed to select the violin or lesson that best suits their needs.

Database Design

Our database, tables were continue modifying to meet our need for the website content. Something worths mentioning includes:

  • The temporary change of items in the shopping cart  before confirmation are stored in the table “shopping_cart” in the database.
  • Something features due to time limit haven’t been setup well so some tables not used yet didn’t be listed in the diagram. 
  • The orders are divided into two tables “order” and “order_detail”, which I joined my “users” table with the “order” table and then concated with “order_detail” table to make any update showed in the “order history” page in the account center.
  • I setup the route to fetch data from the database via SQL: 
To display complete order details in the order history, I need to join several tables, starting with users and orders. This is necessary because our teammate combined lesson and product purchases into a single order ID and shopping cart.
Results and Key Takeaways
Back to Top
1. Features Designed or Envisioned but Not Implemented Due to Time Constraints
Filter Questions on Forms and UI I Designed to Help Novice Users Find the Most Suitable Violin/Lesson, Featured in a Pop-up Window on the Homepage
  1. Purchase guidance on the homepage based on SQL-filtered data, considering various factors influencing instrument and lesson choices, with a filter form on the front-end.
  2. Animation connecting violin components (e.g., pegboxes, fingerboards) with related introductions.
  3. Integration of third-party payment systems and social media accounts for gateways.
  4. AI integration to learn user behavior and provide personalized recommendations.
  5. Chatbot for a more personalized shopping experience for violins and lessons.
2. From Doubt to Aspiration: My First Web Development Journey

This was my first web development project, and I’m proud to have completed it. Initially, I doubted my back-end skills, especially with Node.js, but I ended up developing the entire user management system, which heavily relied on back-end development. Through hands-on practice, I gained valuable experience in both front-end and back-end development. This project confirmed my career goal to become a web developer, not just a designer.

3. Strengthening Project Management and Leadership
  • Team Background: None of us had a coding background before the vocational program.
  • Challenges Encountered: Significant delays and individual struggles, including one teammate facing serious anxiety when debugging.
  • Leadership Strategies to Align and Deliver as the Team Leader:
    1. Organized weekly meetings with the project advisor to address issues in each team member’s area.
    2. Checked progress individually, offering support with debugging and brainstorming solutions.
    3. Fostered collaboration, especially for global features affecting all team members.
    4. Ensured weekly GitHub updates and resolved conflicts individually and also through team collaboration.
    5. Designated a member to manage integration on Github and ensure smooth project functionality.
    6. Set timelines with regular reviews to track progress.
    7. Reassigned tasks in the final week to balance workload and help teammates catch up.
Similar Work

The website you are visiting is my second web development, also individually developed web project, serving as my first online portfolio. 

See All Projects
Web Development / UI Design
Tina's First Personal Web as Portfolio

Tina Loman’s web development & UIUX Studio is Tina’s personal website as portfolio, aiming to develop branding and offer more services in the future.

See Project