
NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

... More content ...


Getting Started with NextJS


This is the code by which users can add customize right click context menu to web page.

**Adding CSS File**

```css
#contextMenuContainer {display: none; position: fixed; width:200px; z-index: 100;}
#contextMenuContainer #contextMenu {list-style: none; padding: 0px; font-size: 20px; border-radius: 10px; border: 1px solid #D3D3D3;}
#contextMenuContainer #contextMenu li {font-size: 20px; cursor: pointer; padding-top: 5px; padding-left: 20px; padding-right: 20px; padding-bottom: 5px; text-align: center;}
```

**Adding JS File**
```js
$(function() {
  var doubleClicked = false;
  $(document).on("contextmenu", function (e) {
   if(doubleClicked == false) {
    e.preventDefault(); // To prevent the default context menu.
    var windowHeight = $(window).height()/2;
    var windowWidth = $(window).width()/2;
    //When user click on bottom-left part of window
    if(e.clientY > windowHeight && e.clientX <= windowWidth) {
      $("#contextMenuContainer").css("left", e.clientX);
      $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
      $("#contextMenuContainer").css("right", "auto");
      $("#contextMenuContainer").css("top", "auto");
    } else if(e.clientY > windowHeight && e.clientX > windowWidth) {
      //When user click on bottom-right part of window
      $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
      $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
      $("#contextMenuContainer").css("left", "auto");
      $("#contextMenuContainer").css("top", "auto");
    } else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
      //When user click on top-left part of window
      $("#contextMenuContainer").css("left", e.clientX);
      $("#contextMenuContainer").css("top", e.clientY);
      $("#contextMenuContainer").css("right", "auto");
      $("#contextMenuContainer").css("bottom", "auto");
    } else {
       //When user click on top-right part of window
      $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
      $("#contextMenuContainer").css("top", e.clientY);
      $("#contextMenuContainer").css("left", "auto");
      $("#contextMenuContainer").css("bottom", "auto");
    }
    $("#contextMenuContainer").fadeIn(500, FocusContextOut());
      doubleClicked = true;
    } else {
      e.preventDefault();
      doubleClicked = false;
      $("#contextMenuContainer").fadeOut(500);
    }
  });
  function FocusContextOut() {
    $(document).on("click", function () {
      doubleClicked = false; 
      $("#contextMenuContainer").fadeOut(500);
      $(document).off("click");           
    });
  }
});
```

[Demo Link](http://jsfiddle.net/AkshayBandivadekar/bj367v4j/)


Adding a Right-click context menu to a webpage


Wealth is an innovative, AI-powered finance platform built on Next.js 15, offering a full-stack solution for mastering personal finances. With advanced AI features and a seamless user interface, Wealth takes the complexity out of money management, empowering users to achieve their financial goals effortlessly.

**Technology Used :** Next.js, React, Tailwind CSS, Supabase, Prisma, Clerk, Inngest, Arcjet, Shadcn UI.

**Key Features:**

- **Income & Expense Tracking**: Gain complete visibility into your financial health by monitoring transactions across multiple accounts in one place.

![Categoty](category.png)

- **Smart Categorization with AI**: Say goodbye to manual data entry! Wealth uses AI-powered receipt scanning to automatically categorize your expenses, ensuring accurate tracking without the hassle.

- **Effortless Recurring Transactions Management**: Manage recurring expenses and incomes with ease, ensuring you’re always on top of bills and subscriptions.

![Recurring](recurring.png)

- **Monthly Budget Management**: Plan your finances like a pro! Set budgets and track your progress to stay within limits, with visual cues to guide you along the way.

![Monthly Budget](budget.png)

- **Real-Time Email Alerts**: Avoid surprises with timely email notifications when you approach your spending limits, helping you maintain control over your finances.

![Budget Email](budget-alert.png)

- **Interactive Charts & Visualizations**: Dive into your financial data with beautifully designed charts that reveal daily trends, spending patterns, and long-term financial health at a glance.

![Chart](chart.png)

- **AI-Powered Monthly Reports**: Receive personalized, AI-generated reports via email with actionable insights into your spending habits and savings opportunities.

![Monthly Email](monthly-report.png)

- **Responsive Design for All Devices**: Whether you’re on your desktop, tablet, or smartphone, Wealth’s fully responsive design ensures a flawless user experience anytime, anywhere.

![Responsive](responsive.png)

**Why Choose Wealth?**

Wealth isn’t just a finance platform—it’s a financial partner. By leveraging cutting-edge AI, Wealth simplifies the way you handle money, providing you with the tools to save smarter, spend wiser, and live better.

**Future Vision**

We’re committed to continuously enhancing Wealth with new features like investment tracking, tax optimization tools, and AI-driven financial forecasting to help you stay ahead in your financial journey.

[Demo Link](https://wealth-ai.vercel.app/)


Wealth


Movie Review Specialist is a sophisticated Progressive Web Application developed using ReactJS and TypeScript, aimed at providing users with a comprehensive movie review experience. Leveraging the TMDB API for real-time movie data and AppWrite for secure user management, this application stands out with its robust features and seamless user interface.

**Technology Used :** ReactJs, React Redux Toolkit, Appwrite, Tailwind CSS, TypeScript.

**Key Features:**

- **TMDB Integration**: The application seamlessly integrates with the TMDB API to fetch up-to-date information about movies, including details, reviews, and trailers.
- **User Authentication and Management**: Users can register and log in securely to access personalized features such as saving favorite movies, reviewing films, and exploring tailored recommendations based on their preferences. AppWrite ensures that user data remains protected and managed efficiently.

![Login](login.png)

![Register](register.png)

- **Homepage with Now Playing Movies**: Upon entering the website, users are greeted with a curated list of currently playing movies, providing instant access to the latest cinematic releases.

- **Detailed Movie Pages**: Each movie has a dedicated page offering comprehensive information. Users can watch trailers, read reviews, view ratings, and get insights into cast and crew details, enhancing their movie-watching decisions.

![Movie Details](movie-details.png)

- **Explore Movie Categories**: Authenticated users can explore various movie categories such as Popular, Top Rated, and Upcoming. A robust search feature allows users to find specific movies quickly.

![Popular Movies](popular-movies.png)

![Top Tated Movies](top-rated-movies.png)

![Upcoming Movies](upcoming-movies.png)

![Search Movies](movie-search.png)

- **Mobile Responsiveness**: The application is designed to provide a seamless experience across devices, ensuring usability and accessibility whether accessed from a desktop, tablet, or smartphone.
- **Testing and Quality Assurance**: With a commitment to quality, the project boasts 100% test coverage using the react Testing library. This ensures reliability and stability across different functionalities.

![Test Coverage](test-coverage.png)

- **Dark Mode/Light Mode Integration**: Users can switch between dark mode and light mode to enhance readability and user experience based on their preferences.
- Much More...

Movie Review Specialist combines cutting-edge technology with a user-centric design philosophy, making it a go-to platform for movie enthusiasts seeking information, reviews, and recommendations. Whether you're looking to discover the latest blockbusters or dive deep into classic films, this application offers a tailored experience that meets your movie-watching needs.

[Demo Link](https://movie-review-specialist.netlify.app/)


Movie Review Specialist


**Technology Used :** ReactJs, PWA

**Feature Details**
- This Project was created with ReactJs.
- This is a Progressive Web Application.
- The user can search movies for review.

![Search Movie](search-movie.png)

- Integrated third party APIs in the application - **New York Times API**.
- When we click on **View More**, then actual The New York Times Page open, to view review of that movie.

![Movie review](review.png)

- When we click on [Top 20 News Articles](https://movie-review-expert-pwa.netlify.app/top-20-news-articles) then we can see top 20 News Articles of current date.
- Added Dark mode and Light mode in the application, so that the user toggles the mode at any time.
- Much More.

[Demo Link](https://movie-review-expert-pwa.netlify.app/)


Hey! I'm Akshay Bandivadekar

Featured Projects

Featured Posts