Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weiwei2694/nextjs15-instagram
Instagram UI: NEXT.js14, Shadcn/UI, Tailwind CSS
https://github.com/weiwei2694/nextjs15-instagram
instagram nexjs nextjs-instagram nextjs14 shadcnui tailwindcss
Last synced: about 7 hours ago
JSON representation
Instagram UI: NEXT.js14, Shadcn/UI, Tailwind CSS
- Host: GitHub
- URL: https://github.com/weiwei2694/nextjs15-instagram
- Owner: weiwei2694
- Created: 2024-08-12T05:58:56.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-15T05:20:13.000Z (5 months ago)
- Last Synced: 2024-11-24T02:17:13.580Z (2 months ago)
- Topics: instagram, nexjs, nextjs-instagram, nextjs14, shadcnui, tailwindcss
- Language: TypeScript
- Homepage: https://nextjs15-instagram.vercel.app
- Size: 288 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Instagram UI: NEXT.js14, Shadcn/UI, Tailwind CSS
This project is a UI slice of the latest version of Instagram (2024) with a focus on the home page. While not all Instagram features are sliced, the layout and elements provided have been implemented in a fully responsive manner, ensuring optimal display across devices.
If you are looking to create an Instagram clone, this project can be a very useful starting point. You only need to adjust the layout to your needs, and for those familiar with Next.js, this implementation will be very easy to understand and integrate.
## Check Out Instagram UI Project Preview 2024
I am pleased to present a preview of the latest UI project inspired by Instagram version 2024. This project showcases the design and elements of the Instagram homepage sliced in detail, although not all Instagram features are covered.
### What can you see:
- **Home Page Design**: Enjoy the new look and feel of the Instagram homepage.
- **Fully Responsive**: Display content responsively across screen sizes, from desktop to mobile devices.
### Access Preview:
Click the link below to visit the preview site and see how Instagram's latest design is implemented in this project:
[Visit Preview Site](https://nextjs15-instagram.vercel.app/)
## Cloning the repository
```
git clone https://github.com/weiwei2694/nextjs15-instagram.git
cd nextjs15-instagram
```
## Install packages
```
npm install
yarn install
pnpm install
bun install
```
## Available commands
| Command | Description |
| ---------------------- | ---------------------------------------- |
| `npm run dev` | Starts a development instance of the app |
| `npm run build` | Builds the app for production |
| `npm run start` | Starts the app in production mode |