Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skyv26/nft-preview-page
NFT preview page is actually a SPA small front-end project which I took as challenge and the best thing that I did is I actually made it pixel perfect. My design is actually full responsive and 99% match of original design.
https://github.com/skyv26/nft-preview-page
react reactjs styled-components
Last synced: 28 days ago
JSON representation
NFT preview page is actually a SPA small front-end project which I took as challenge and the best thing that I did is I actually made it pixel perfect. My design is actually full responsive and 99% match of original design.
- Host: GitHub
- URL: https://github.com/skyv26/nft-preview-page
- Owner: skyv26
- Created: 2021-11-29T07:12:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-01T18:22:34.000Z (almost 2 years ago)
- Last Synced: 2024-12-27T16:02:42.249Z (about 1 month ago)
- Topics: react, reactjs, styled-components
- Language: JavaScript
- Homepage:
- Size: 435 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - NFT preview card component solution
This is a solution to the [NFT preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U). 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)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
**Note: Delete this note and update the table of contents based on what sections you keep.**
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Open a lightbox gallery by clicking on the large product image
- Switch the large product image by clicking on the small thumbnail images
- Add items to the cart
- View the cart and remove items from it
### Screenshot
### Links
- Solution URL: [GitHub](https://github.com/skyv26/nft-preview-page)
- Live Site URL: [Netlify](https://mynftcard.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Styled Components](https://styled-components.com/) - For styles
**Note: These are just examples. Delete this note and replace the list above with your own choices**
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `yarn test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### What I learned
I learnt React Hooks with great learning experience while making this project and also I did work a lot on CSS too..
### Continued development
ReactJS, Redux, Backend Development using Python Django
## Author
- Website - [Aakash Verma](https://www.your-site.com)
- Frontend Mentor - [@skyv26](https://www.frontendmentor.io/profile/skyv26)
- Github - [Aakash Verma](https://www.github.com/skyv26)