🔖 Introduction
About the project
Introduction
This project is a single-page application (SPA) for Cargo TON, a fictional logistics company. It was built using React.js with Vite as the build tool, ensuring fast development and performance. The site aims to showcase logistics services and attract clients with a modern, user-friendly interface.
Design and Features
The website adapts to all screen sizes, offers light and dark mode options, and includes a navigation bar with dropdowns for easy access. It showcases Cargo TON’s services, displays customer testimonials for trust, and keeps users updated with a blog section. These features ensure the site is both functional and appealing, catering to business owners and casual visitors alike.
Development Process
The development phase details the technology stack, architecture, and key features implemented. The stack includes React.js with Vite for the framework, React Router for navigation, Tailwind CSS for styling, Shadcn UI for reusable components, and Lucide Icons for visual appeal.
The site has client-side routing, leverages React Router for seamless page transitions, and provides static content for services, testimonials, and blog posts with no backend integration. Data is hardcoded or fetched from local JSON files, with components like the navigation bar included across routes.
🤔 Problem space
Problems to Solve/Requirements to Create
The problem space identifies key issues for a fictional company, hypothetically facing challenges in establishing an online presence. The top-level overview includes:
Inadequate Service Presentation
Extended Problem Statement: The company lacks an effective online platform to showcase its logistics services, such as ocean freight, air freight, and warehousing, making it difficult for potential clients to understand offerings.
Current Solution: The company may have a basic website or no website, relying on word-of-mouth or physical brochures, which limits reach and engagement.
How do we know it’s a problem: Without a clear presentation, potential clients might choose competitors with better online visibility, as evidenced by industry trends showing 70% of B2B decisions start with online research.
Poor User Experience on Mobile Devices
Extended Problem Statement: The existing site (if any) is not responsive, leading to a poor experience for mobile users, who are increasingly accessing logistics information on the go.
Current Solution: Users might zoom in and out or navigate awkwardly on non-responsive sites, or avoid the site altogether.
How do we know it’s a problem: Metrics show 60% of web traffic comes from mobile devices, and user feedback from similar sites indicates frustration with non-adaptive layouts.
Outdated or No Blog Section
Extended Problem Statement: The company lacks a blog or news section to keep users informed about industry trends, company updates, or logistics tips, missing opportunities to engage and build trust.
Current Solution: No regular updates, relying on static content that quickly becomes irrelevant.
How do we know it’s a problem: User feedback from competitors’ sites shows blogs increase engagement by 30%, and regular updates help in SEO rankings, as per industry reports.
These problems were addressed by developing a responsive website with a services section, mobile optimization, and a dynamic blog area, ensuring cargo TON meets client needs effectively.
Why solve these problems?
Addressing these problems is crucial for establishing a competitive online presence for Cargo TON. Reasons include:
To attract more clients by clearly presenting services that align with the company’s goal of client acquisition.
To improve user experience, especially on mobile, catering to a larger audience in an increasingly mobile-first world.
To engage users with regular updates, building trust and community, which is vital for long-term client relationships.
A user satisfaction matrix could show current low satisfaction in mobile experience and engagement, with the project aiming to shift these to high satisfaction post-implementation, though specific metrics are hypothetical for a fictional company.
Goals and Objectives
Company Objective 🎯
The company's objective is to establish a strong online presence and increase client acquisition through the website, which will contribute to Cargo TON’s broader goal of expanding its logistics market share.
Project goals
Implementing a consistent and modular UI ecosystem using Shadcn UI components for design consistency.
Creating a responsive design that works on all devices for accessibility.
Providing a theme switcher for user preference, enhancing personalization.
Developing an intuitive navigation system with accessibility features.
Showcasing services effectively to attract clients.
Including a blog section for user engagement.
Ensuring performance optimization for fast load times.
User Stories
User stories outline the needs of different user types, which is crucial for fulfilling project goals:
These stories guided the design to ensure both user types find value, with features like the services section for clients and blog for visitors.
🌟 Design space
UI Design
The design space covers UI design, wireframes, high-fidelity mockups, and the design system used. The UI design focuses on a clean, modern look, reflecting Cargo TON’s branding with a color scheme of yellows and blacks, symbolizing optimism, energy, and elegance. The layout is intuitive, with clear calls to action buttons, ensuring easy navigation.
Low-fidelity Wireframe
Low-fidelity wireframes, created using Figma, outlined the structure of key pages, including the homepage with a slider showcasing services, a services grid, testimonials, and blog section. This helped plan element placement and flow before moving to high-fidelity designs. The design process included the wireframes below.
High-fidelity design
High-fidelity mockups, developed in Figma, incorporated branding and ensured consistency in typography, colors, and spacing. Key screens include the homepage slider, services page with cards, and blog list, all designed for a professional look.
Design system 🎨
The design system utilized was Shadcn UI, a collection of accessible and customizable React components (Build your component library - shadcn/ui). It was chosen for its modularity and speed, ensuring consistency across the site while accelerating development. I used the following components:
Accordion: For the "Why Choose Us" section, providing an expandable layout for company highlights.
Button: For interactive elements like call to actions across the site.
Carousel: For the testimonials section, displaying customer feedback in a sliding format.
Theme Provider: This is used to enable light/dark mode toggling and enhance user accessibility.
Navigation Menu: For the responsive dropdown navigation bar, ensuring easy access to pages.
🧑💻 Development Phase
Technology Stack Selection
The development phase details the technology stack, architecture, and key features implemented. The stack was carefully chosen for efficiency, flexibility, and a smooth user experience:
React.js
Vite
React Router
Tailwind CSS
Shadcn UI
Lucide Icons
Why React.js?
Component-Based Architecture: Enables reusable UI components, making the frontend modular and maintainable.
Efficient UI Updates: Uses a virtual DOM for faster rendering and smooth interactions.
Rich Ecosystem: Offers vast library support, including React Router, for robust development.
Why Vite?
Rapid Development: Provides fast builds and hot module replacement for quick feedback during coding.
Optimized Bundling: Ensures efficient handling of dependencies, boosting performance.
Modern Tooling: Simplifies setup and aligns with React.js for a streamlined workflow.
Why React Router?
Client-Side Routing: Enables seamless navigation between pages without full reloads, enhancing user experience.
Dynamic Navigation: Powers the responsive navigation menu, supporting dropdowns and route transitions.
Scalability: Allows easy addition of new routes, preparing the site for future growth.
Why Tailwind CSS?
Utility-First Approach: Speeds up styling with pre-built classes, reducing custom CSS needs.
Responsive Design: Simplifies adaptation to all screen sizes with built-in breakpoints.
Flexibility: Pairs with Shadcn UI for quick, branded customizations.
Why Shadcn UI?
Pre-Built Components: Offers accessible, ready-to-use elements like accordion and carousel, cutting development time.
Customizability: Integrates with Tailwind CSS for styling that matches Cargo TON’s identity.
Consistency: Ensures a uniform look across the site, enhancing professionalism.
Why Lucide Icons?
Visual Clarity: Adds intuitive icons to enhance navigation and content.
Lightweight: Integrates easily with React, keeping performance intact.
Broad Selection: Provides a wide range of icons to support the logistics theme.
Key Features of the Software
Responsive Design: Adapts to different screen sizes, ensuring usability on desktops, tablets, and mobiles.
Dark/Light Mode Switch: Users can toggle themes, enhancing accessibility, managed via React Context API.
Navigation Bar: With dropdown menus for easy access, redesigned the Shadcn UI for accessibility.
Services Section: Showcases logistics services like ocean freight and air freight, with descriptions and images, addressing the presentation problem.
Testimonials: Displays customer feedback, building trust, with cards styled using Shadcn UI.
Blog/News Section: Keeps the site dynamic with recent updates, engaging visitors with industry insights.
Design and User Experience Features
Feature | Technology Used | Impact on User Experience |
|---|
Responsive Design | Tailwind CSS | Consistent experience across all devices |
Theme Switching | Shadcn UI, Vite | Personalized and accessible viewing options |
Navigation Bar | Shadcn UI | Easy exploration with dropdowns and accessibility |
Visual Enhancements | Lucide Icons, Shadcn UI | Engaging and clear interface |
Performance and Technical Features
Feature | Technology Used | Impact on Development and Performance |
|---|
Reusable Components | React.js, Shadcn UI | Efficient development and maintenance |
Performance Optimization | Vite, React Router | Fast load times and smooth interactions |
Customizable Design | Tailwind CSS, Shadcn UI | Unique branding without extensive custom CSS |
Challenges Faced and Solutions
Challenges during development and their solutions include:
Integrating Shadcn UI components with Tailwind CSS: Ensuring components work well with the site’s color scheme.
Solution: Customized components by overriding styles using Tailwind classes, ensuring branding consistency.
Making the site fully responsive: Ensuring all elements function on different devices.
Solution: Used Tailwind’s responsive classes and tested on various screen sizes using browser developer tools.
Managing state for theme switching: Handling light and dark modes across the site.
Solution: I used React Context API for state management, which makes toggling seamless.
Future Vision and Next Steps
The future vision for Cargo TON’s website includes:
Adding a backend: To fetch dynamic data like real-time shipping rates or customer reviews, enhancing interactivity.
Implementing user authentication: For personalized experiences, such as client dashboards for tracking shipments.
Enhancing the blog section: With commenting or subscription options, increasing engagement.
Integrating with social media: To share posts and boost visibility, aligning with marketing goals.
Performance optimizations: Using code splitting and lazy loading, ensuring scalability for future features.
AI-driven features: AI-powered shipment tracking, underscoring the scalability of the design.
Long-term, the vision is to evolve into a fully interactive platform, potentially integrating AI for advanced logistics solutions, reflecting the project’s scalability.
Get visibility from recruiters & peers