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 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

Libraries used

Styled Components

Styled components 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. 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. 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 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 and the website's link is Author-Admin-app.

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