- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🕸️ Details
CSE-Insights is a Next.JS 14 Full Stack application that highlights the key features of Next.JS along with a comprehensive CRUD post sharing system, utilizing mongoDB database and implementing NextAuth authentication.
This application is inspired from the application Promptopia by the NextJS crash course by javascriptmastery, who taught me the importance of NextJS and the core concepts of this New ReactJS framework.
- Next.JS 14
- MongoDB database
- NextAuth Authentication
- Tailwind CSS
In addition to the features taught by adrianhajdin, I self implemented some of the following features -
👉 Duration of a post: Users can now see how much duration it has been since the post was created.
👉 Title for each post: A title field for each post has been added which enables the users to take a look at the post and understand what it is going to speak about.
Apart from these, there are also some design and code changes that I have made to make it look more beautiful.
Other features implemented are as follows -
👉 Discover and Share Deep CSE-Insights: Allow users to Unlock the Power of Computer Science & Engineering • CSE Insights - A Gateway to Practical Tips, Proven Strategies, and College life stories.
👉 Edit and Delete Created Posts: Users have the ability to edit their created posts at any time and delete them when needed.
👉 Profile Page: Each user gets a dedicated profile page showcasing all the posts they've created, providing an overview of their contributions.
👉 View Other People's Profiles: Users can explore the profiles of other creators to view the posts they've shared, fostering a sense of community.
👉 Copy to Clipboard: Implement a convenient "Copy to Clipboard" functionality for users to easily copy the insights for their use.
👉 Search posts by Specific Tag, username as well as content: Allow users to search for posts based on their preference.
👉 Google Authentication using NextAuth: Enable secure Google authentication using NextAuth, ensuring a streamlined and trustworthy login experience.
👉 Responsive Website: Develop a fully responsive website to ensure optimal user experience across various devices, from desktops to smartphones
and many more, including code architecture and reusability.
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/iAryanK/CSE-Insights.git
cd CSE_InsightsInstallation
Install the project dependencies using npm:
npm installSet Up Environment Variables
Create a new file named .env in the root of your project and add the following content:
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL_INTERNAL=http://localhost:3000
NEXTAUTH_SECRET=
GOOGLE_ID=
GOOGLE_CLIENT_SECRET=
MONGODB_URI=Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on these corresponding websites from Google Cloud Console, Cryptpool (for random Auth Secret), and MongoDB.
Running the Project
npm run devOpen http://localhost:3000 in your browser to view the project.
Next JS 14
Official documentation of ReactJS says never to use plain ReactJS anymore.
It recommends to build new applications by choosing one of the frameworks of ReactJS and the first framework they recommend is NextJS.
This new piece of technology as gained a lot of popularity. Companies such as Netflix, Notion, Nike, twitch, etc. has adopted NextJS.
NextJS 13 -> major update of NextJS with experimental app router
NextJS 14 -> May 4th, 2023, NextJS app router becomes stable
Why NEXT JS?
😀 simplifies development process
😀 optimizes web applications
😀 Server side and client side rendering
😀 Inbuilt Search Engine Optimization
😀 File and folder based routing
😀 FullStack application creating capability
😀 Automatic code splitting
And at the end of the day, it is just an extention of ReactJs.😀
Core Concepts
Starting from
npx create-next-app@latest
Following are some of the concepts of NextJS -
➡️ File and Folder based routing
➡️ Client and server components
➡️ Routing and special NextJS files
➡️ Data fetching Strategies
➡️ NextJs API routes
➡️ Static and Dynamic Metadata
Project CSE-Insights
The development process will be updated here soon...