Blog App NextJS

screenshot of Blog App NextJS
express
nextjs
react
chakra-ui

Blog App NextJS

Blog application made individually in 5 days . Given functionalities like Post blog, get all blogs, login with token, signup, search and user can send mail or contact also to the site owner.

Overview

The Blog App is a project developed by an individual within a span of 5 days. It offers various functionalities such as login, signup, creating a blog, retrieving all blogs, searching blogs, and sending emails to the website owner. The tech stacks used in this project include Next.js, MongoDB, Redux, Redux-thunk, React hooks, and Chakra-ui for styling and responsiveness.

Features

  • Login: Users can log in to their accounts to access their profile and perform authorized actions.
  • Signup: New users can create accounts by providing the necessary information and signing up.
  • Create blog: Users can create and publish their own blog posts.
  • Get all blogs: Users can view a list of all the blogs available on the platform.
  • Search blogs: Users can search for specific blogs based on keywords or topics.
  • Mail to website owner: Users can send emails to the website owner for any queries or feedback.

Installation

To install the Blog App, follow these steps:

  1. Clone the repository from GitHub
  2. Navigate to the project directory in your terminal.
  3. Install the required dependencies by running the following command:
npm install
  1. Set up the MongoDB connection by creating a .env file in the project root directory and adding the following line:
MONGO_URI=your-mongodb-connection-string
  1. Start the application by running the following command:
npm run dev
  1. Open your web browser and access the application at http://localhost:3000.

Summary

The Blog App is a web application developed by an individual in a short span of time. It allows users to login, signup, create and view blogs, search for specific blogs, and send emails to the website owner. The application is built using Next.js, MongoDB, Redux, Redux-thunk, React hooks, and Chakra-ui for styling and responsiveness. With its intuitive user interface and feature-rich functionality, the Blog App provides a seamless blogging experience for its users.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

chakra-ui
Chakra UI

Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

framer-motion
Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.

vercel
Vercel

Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.