# Next JS web app with parallax effect and animations.

# Introduction 
 Let's learn about web apps on the latest technology in trend, next Js.  Next Js is a React framework for building web applications easily.

#### Advantages of using next Js 
   + **Server Side Rendering** which means that the page the user view  is prepared in the server and is sent directly. This reduces the loading time of the page.
   + **Serverless API** . Next Js provides us serverless API such that we can keep both the front and  back end in the same environment.
   + **Improved SEO**
We use MongoDB as the backend server for this project and also typescript.

## Project Setup 
Decide your packet manager before starting your project. I have used `npm` for this project.

   Set up a [basic next JS app with Ts support](https://nextjs.org/docs/basic-features/typescript) using the following command,
```
npx create-next-app@latest --ts

``` 
Then you can see a folder called `pages` where we can write the code for both front and backend(`pages/api/`).

Create a folder called `static` in `public` to store your images and SVG  for the project.

Then Set up your free MongoDB cluster in [MongoDB atlas](https://www.mongodb.com/atlas/database)

# Libraries used
 ### Styled Components 
 [Styled components](https://styled-components.com/) is a awesome library to style your web pages. It helps you keep your styles grouped together and great for responsive design. To start with styled components, 
```
npm i styled-components

```
Then you can start styling your components like `div`, `img`, `input` and use them in your website development.
 ### Material UI

  One of the most used styling libraries for react is material UI. There is no need to code the styles yourself, you can just import the pre-styled component from [material UI](https://mui.com/). This can make your website look a lot neater and clean.
   This library also has a lot of icons for free that you can use.
 ### React easy crop

  This is a best library to crop the uploaded image to set a **profile image**. You can upload the cropped image to [Cloudinary](https://cloudinary.com/). You can store the website's secure URL in MongoDB and use  it as profile image.
### React-spring

  We can create spring like animations using this library. The main advantage of this library is creating **parallax effects**. [Parallax effects](https://react-spring.io/components/parallax) makes any kind of sites look cool and more attractive. This also provides many smooth and cool animations.

### Other important Libraries

We can also make a site more attractive by using 3d  animated and interactive models from Spline.
There are also many crucial libraries for web development such as **bcrytp** for encrypting user passwords and **jasonwebtoke** for  verifying JSON Web Token.

# Project Link
   The full project is available on [Github](https://github.com/harisankar01/article-app) and the website's link is [Author-Admin-app](https://author-admin-app.herokuapp.com/).

Just check out the project and let your innovation lead your way.