Blog App NextJS is a full-stack blog application template built on Next.js that provides user authentication, blog creation and retrieval, search, and a contact-mail system, all styled with Chakra UI.
What is Blog App NextJS?
Blog App NextJS is a full-stack blog application built with Next.js, MongoDB, Redux, Redux-thunk, and Chakra UI. It accepts user input for signup and login, stores user credentials with JSON Web Tokens, and lets authenticated users create and retrieve blog posts. The app also includes a search feature for finding blogs and a mail-to-owner contact form powered by EmailJS. The project was developed individually in 5 days and is publicly demoed at https://blog-application-lac.vercel.app/.
Key Features
- Token-based authentication — Login and signup using JSON Web Tokens (jsonwebtoken) to manage user sessions.
- Blog creation — Authenticated users can create and publish blog posts, with all posts stored in MongoDB.
- Get all blogs — The app fetches and displays the full list of blog posts from the database.
- Search blogs — Users can search through blog content to find specific posts quickly.
- Contact form — A mail system that lets visitors send messages to the website owner via EmailJS.
- State management — Redux with Redux-thunk handles global state and asynchronous API calls.
- UI styling — Chakra UI provides a responsive, accessible component library for the frontend.
- Tech integrations — Built with Next.js, MongoDB, Mongoose, React hooks, and React icons, with react-vertical-timeline-component in the topic list.
Who is it for?
Blog App NextJS is for developers who want a working full-stack blog with authentication to modify and deploy. It is also useful for content creators who need a simple blog platform with a contact page and search. Freelancers can use it as a starting point for client projects, and students can study how Next.js API routes, MongoDB, Redux, and Chakra UI integrate in a real application.
What can you do with Blog App NextJS?
- Launch a blog: Create an account, write posts, and list them for readers.
- Add protected content: Use JWT authentication to restrict blog creation to logged-in users.
- Let readers contact you: The EmailJS-powered form sends messages directly to the site owner.
- Search posts: Users can find relevant articles using the blog search feature.
How does Blog App NextJS work?
The application uses Next.js for both frontend and API routes. On signup or login, the server issues a JWT that the client stores and sends with subsequent requests. Blog posts are created via authenticated API calls and saved to MongoDB; the app retrieves all posts for the listing page and filters them for search. The contact form calls EmailJS directly from the client to deliver messages to the owner.
FAQ
Where can I see a live demo of Blog App NextJS?
A live demo is hosted at https://blog-application-lac.vercel.app/.
What technologies does Blog App NextJS use?
It uses Next.js, MongoDB, Redux, Redux-thunk, Chakra UI, and jsonwebtoken, with EmailJS for the contact form.
Does Blog App NextJS support user authentication?
Yes, it includes login and signup with token-based authentication using JSON Web Tokens.
Can I search blog posts in this app?
Yes, there is a dedicated search functionality to find blogs from the stored collection.
Is the contact form functional?
Yes, the contact/mail feature uses EmailJS so visitors can send mail to the website owner.
