https://github.com/ankitray-dev/anime-scroll
Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations
https://github.com/ankitray-dev/anime-scroll
framer-motion nextjs reactjs shikimori-api
Last synced: about 2 months ago
JSON representation
Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations
- Host: GitHub
- URL: https://github.com/ankitray-dev/anime-scroll
- Owner: ankitray-dev
- License: mit
- Created: 2024-07-08T15:17:58.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-18T09:39:21.000Z (8 months ago)
- Last Synced: 2025-01-17T05:29:14.489Z (4 months ago)
- Topics: framer-motion, nextjs, reactjs, shikimori-api
- Language: TypeScript
- Homepage: https://anime-scroll-weld.vercel.app/
- Size: 1.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Anime Scroll
Anime Scroll is a Next.js 14-based application that leverages server actions for efficient API calls, implements infinite scrolling for seamless content loading, and enhances user experience with Framer Motion animations. Ideal for anime enthusiasts, it integrates features such as data fetching from the Shikimori API, client-side rendering with motion components, and optimizations for improved performance.
## Features
- **Server Side App with Next.js 14**: Utilizes the latest version of Next.js for server-side rendering and server actions.
- **Server Actions**: Abstracts the process of making API calls from client to server, allowing you to perform create, update, and delete actions alongside typical read operations.
- **Infinite Scroll**: Implements infinite scrolling to dynamically load content as the user scrolls.
- **Framer Motion Animations**: Enhances the user interface with smooth and interactive animations.
## Technologies Used
- **Next.js 14**
- **React**
- **Framer Motion**
- **Shikimori API**
- **react-intersection-observer**
## Getting Started
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
- Node.js (v14 or later)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/ankitray-dev/anime-scroll.git
```
2. Navigate to the project directory:
```bash
cd anime-scroll
```
3. Install dependencies:
```bash
npm install
```
or
```bash
yarn install
```
### Usage
1. Start the development server:
```bash
npm run dev
```
or
```bash
yarn dev
```
2. Open your browser and go to `http://localhost:3000` to see the app in action.
## Contributing
We welcome contributions from the community. To contribute, follow these steps:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-name
```
3. Make your changes and commit them:
```bash
git commit -m 'Add some feature'
```
4. Push to the branch:
```bash
git push origin feature-name
```
5. Open a pull request on GitHub.
## License
This project is licensed under the MIT License.
## Acknowledgements
- Thanks to the creators of [Next.js](https://nextjs.org/), [Framer Motion](https://www.framer.com/motion/), and [Shikimori API](https://shikimori.one/).
- Special thanks to the developers who contributed to the [react-intersection-observer](https://www.npmjs.com/package/react-intersection-observer) package.
## Contact
For questions or feedback, please contact Ankit at [[email protected]].