Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jaceleedev/product-preview-card-component
Frontend Mentor challenge (1. Newbie) - Product preview card component.
https://github.com/jaceleedev/product-preview-card-component
component-based-design frontendmentor-challenges nextjs responsive-design tailwindcss typescript
Last synced: 8 days ago
JSON representation
Frontend Mentor challenge (1. Newbie) - Product preview card component.
- Host: GitHub
- URL: https://github.com/jaceleedev/product-preview-card-component
- Owner: jaceleedev
- Created: 2024-07-24T01:18:56.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-24T04:24:12.000Z (4 months ago)
- Last Synced: 2024-07-25T04:21:57.484Z (4 months ago)
- Topics: component-based-design, frontendmentor-challenges, nextjs, responsive-design, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://product-preview-card-component-lake-two.vercel.app
- Size: 1.34 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Product preview card component solution
This is a solution to the [Product preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
### Screenshot
### Links
- Solution URL: [https://www.frontendmentor.io/solutions/product-preview-card-component-with-nextjs-tailwind-css-Ob5WUpCTCg]
- Live Site URL: [https://product-preview-card-component-lake-two.vercel.app/]
## Getting Started
To get a local copy up and running follow these simple steps:
### Prerequisites
Make sure you have the following software installed on your machine:
- [Node.js](https://nodejs.org/) (Node.js 18.17 or later)
- [pnpm](https://pnpm.io/)
### Installation
1. Clone the repository:
```sh
git clone https://github.com/jaceleedev/product-preview-card-component.git
```
2. Navigate to the project directory:
```sh
cd product-preview-card-component
```
3. Install dependencies using pnpm:
```sh
pnpm install
```
4. Start the development server:
```sh
pnpm dev
```
5. Open your browser and visit http://localhost:3000 to view the project.
## My process
### Built with
- Next.js (v14.2.5)
- TypeScript (v5)
- Tailwind CSS (v3.4.1)
- Semantic HTML5 markup
- CSS Grid, Flexbox
- SEO & web accessibility
### What I learned
Throughout this project, I gained valuable insights and improved my skills in several areas:
1. Responsive Design: I discovered that combining both grid and flexbox is incredibly powerful for creating responsive layouts. This approach provides a versatile toolkit for addressing various design challenges across different screen sizes.
2. Desktop-first vs Mobile-first Approach: While I'm aware that the mobile-first approach is currently trendy, I found the desktop-first approach more intuitive when working on responsive designs. However, I recognize the need to gain more experience with the mobile-first approach in future projects. This will help me better understand the pros and cons of each method and determine which is more suitable for different scenarios.
These learnings have not only improved my technical skills but also given me a clearer direction for future growth and areas to focus on in upcoming projects.
### Continued development
In future projects, I want to continue focusing on and improving in these areas:
1. Exploring the Mobile-First Approach: I plan to implement the mobile-first approach to gain hands-on experience. By doing so, I aim to understand the strengths and weaknesses of both mobile-first and desktop-first methodologies. This practical experience will be invaluable in helping me determine the most appropriate approach for different project scenarios.
By focusing on these areas, I hope to continually improve my front-end development skills and create more efficient and sophisticated web applications.
### Useful resources
- [Next.js Documentation](https://nextjs.org/docs) - Comprehensive guide to Next.js features and API.
- [Tailwind CSS Documentation](https://tailwindcss.com/docs/installation) - Detailed documentation for Tailwind CSS.
## Author
- GitHub - [@jaceleedev](https://github.com/jaceleedev)
- Frontend Mentor - [@jaceleedev](https://www.frontendmentor.io/profile/jaceleedev)