- Getting Started
- Site Preview
- Overview
- Technologies and Frameworks Used
- Thought Process Behind the Design
- Key Design and Development Choices
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/Aditya-Coomar/trend-square-toastd.git
- Install NPM packages
npm install
- Start the server
npm run dev
After starting the development server:
- Open your web browser and navigate to:
http://localhost:3000 - The project will be running in development mode with hot-reload enabled, meaning any changes you make to the code will automatically update in the browser.
- Make sure port 3000 is available on your system for local development
- If the project runs on a different port, you'll see the correct URL in your terminal after running
npm run dev - For the best experience, use modern browsers like Chrome, Firefox, or Edge
You can view the live version of the project at: Visit Live Site
https://trend-square.vercel.app
The TrendSquare application is a dynamic platform designed to showcase the latest trends in fashion, beauty, and lifestyle. This documentation outlines the thought process, design choices, and functionality decisions made during development to ensure a seamless and engaging user experience.
- HTML5, CSS3, TypeScript: For the core structure and interactive elements.
- NextJS: Component-based architecture to enable a dynamic and modular UI.
- Shadcn UI: UI library for consistent UI design of elements.
- Google Fonts and Icons: Icon and Font Library.
- Tailwind CSS: For scalable and maintainable styling.
The goal of TrendSquare is to:
- Provide users with an interactive and visually rich experience.
- Facilitate product discovery, personalization, and e-commerce functionality.
- Utilize modern design principles to ensure clarity, usability, and responsiveness.
- Engagement: Features like "Upvotes," "Loved by You," and "Add to Wishlist" enable users to interact with products and create a personalized catalog.
- Exploration: The split-screen design with categories and video previews ensures users can quickly navigate and explore trending products.
- Purchase Readiness: Detailed product pages with clear CTAs ("Add to Cart," "Buy Product") simplify the buying process.
- Purpose: Enhances visual contrast, focuses attention on images/videos, and evokes a sense of luxury.
- Implementation: Used a dark color palette with accent highlights for buttons and icons to ensure readability and clarity.
- Left Panel: Displays categories with icons for easy navigation.
- Right Panel: Features video previews of products for visual storytelling.
- Left Panel: High-resolution product images displayed in a grid format.
- Right Panel: Comprehensive product details, engagement metrics, and CTAs.
- Typography:
- Clean, sans-serif fonts chosen for readability on various screen sizes.
- Font sizes and weights adjusted for hierarchy and emphasis (e.g., product names vs. descriptions).
- Icons:
- Universal symbols like hearts, share icons, and cart icons improve usability and align with user expectations.
- Prominent Buttons and Links:
- "Add to Wishlist," "Buy Product," and "Add to Cart" encourage user action.
- "Visit Product Page" for more details enables deeper exploration.
- Logical Content Flow: Ensures users can easily locate what they need without unnecessary distractions.
- Mobile First: Layouts and features designed with mobile users in mind and scaled for larger screens.
- Flexbox/Grid: CSS Grid and Flexbox used to implement adaptive layouts and maintain consistency across devices.
- Focused on visual engagement with categories and video previews.
- Subtle hover effects and animations guide user interactions.
- Organized with clear separation between visual content (images) and textual information (product details).
- Price, reviews, and upvotes displayed prominently for quick decision-making.