{"id":15705205,"url":"https://github.com/skyv26/nft-preview-page","last_synced_at":"2025-07-20T10:33:00.816Z","repository":{"id":103821122,"uuid":"432939801","full_name":"skyv26/nft-preview-page","owner":"skyv26","description":"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.","archived":false,"fork":false,"pushed_at":"2023-02-01T18:22:34.000Z","size":445,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-12T18:18:06.579Z","etag":null,"topics":["react","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skyv26.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-29T07:12:09.000Z","updated_at":"2023-06-14T08:58:54.000Z","dependencies_parsed_at":"2023-03-09T16:15:48.213Z","dependency_job_id":null,"html_url":"https://github.com/skyv26/nft-preview-page","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"5e4178a97e777ec8b8168744e77511a3dd63c22b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/skyv26/nft-preview-page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyv26%2Fnft-preview-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyv26%2Fnft-preview-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyv26%2Fnft-preview-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyv26%2Fnft-preview-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skyv26","download_url":"https://codeload.github.com/skyv26/nft-preview-page/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyv26%2Fnft-preview-page/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266111434,"owners_count":23877980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reactjs","styled-components"],"created_at":"2024-10-03T20:14:58.818Z","updated_at":"2025-07-20T10:33:00.784Z","avatar_url":"https://github.com/skyv26.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - NFT preview card component solution\n\nThis 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. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n\n**Note: Delete this note and update the table of contents based on what sections you keep.**\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the site depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Open a lightbox gallery by clicking on the large product image\n- Switch the large product image by clicking on the small thumbnail images\n- Add items to the cart\n- View the cart and remove items from it\n\n### Screenshot\n\n![](./src/assests/screenShot.png)\n\n### Links\n\n- Solution URL: [GitHub](https://github.com/skyv26/nft-preview-page)\n- Live Site URL: [Netlify](https://mynftcard.netlify.app/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- CSS Grid\n- Mobile-first workflow\n- [React](https://reactjs.org/) - JS library\n- [Styled Components](https://styled-components.com/) - For styles\n\n**Note: These are just examples. Delete this note and replace the list above with your own choices**\n\n# Getting Started with Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n\n### What I learned\n\nI learnt React Hooks with great learning experience while making this project and also I did work a lot on CSS too..\n\n### Continued development\n\nReactJS, Redux, Backend Development using Python Django\n\n\n## Author\n\n- Website - [Aakash Verma](https://www.your-site.com)\n- Frontend Mentor - [@skyv26](https://www.frontendmentor.io/profile/skyv26)\n- Github - [Aakash Verma](https://www.github.com/skyv26)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyv26%2Fnft-preview-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskyv26%2Fnft-preview-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyv26%2Fnft-preview-page/lists"}