Scribd
Upload
10 views5 pages

Next.js-project

The Next.js User Posts App is a responsive application that allows users to log in and view their posts and comments using data from the JSONPlaceholder API, featuring both admin and user access. Admins can view all posts and a dashboard with a pie chart visualization, while regular users can only access their own content. The app includes Google Maps integration for user locations and is styled with Tailwind CSS for a responsive design.

Uploaded by

Mark Robert Tan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views5 pages

Next.js-project

The Next.js User Posts App is a responsive application that allows users to log in and view their posts and comments using data from the JSONPlaceholder API, featuring both admin and user access. Admins can view all posts and a dashboard with a pie chart visualization, while regular users can only access their own content. The app includes Google Maps integration for user locations and is styled with Tailwind CSS for a responsive design.

Uploaded by

Mark Robert Tan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Next.

js User Posts App

A simple and responsive Next.js application that allows users to log in and view posts and comments
using data from the JSONPlaceholder API. It includes admin access, user-specific posts, Google Maps
integration for displaying user locations, and an admin-only dashboard with a pie chart visualization of
post distribution.

Features

Login Authentication

Users log in using their email and username from JSONPlaceholder.

Admin Access

A special admin account can view all users, all posts, and all comments. Admins can also view the
dashboard with a pie chart showing post distribution.

Regular User Access

Regular users can log in with the same email and use it as their password from JSONPlaceholder. They
can view only their own posts and related comments.

User Details with Google Maps Embed

View the user's address with an embedded Google Map showing their exact location.

Posts Visualization with Pie Chart

Visualize post distribution using ApexCharts (admin only).

Responsive UI

Styled with Tailwind CSS for a responsive design that works on mobile and desktop.
Demo Login Credentials

Admin Login

Email: [email protected]

Password: admin123

Access: View all users, posts, comments, and the dashboard with a pie chart.

Regular User Login (from JSONPlaceholder)

Email: [email protected]

Password: [email protected]

Access: View only their own posts and comments.

Note: The registration form includes validation only and does not register or save new users.

Pages

/auth – Login & Register (validation only)

/users – View all users (admin only)

/posts – View posts and comments

/dashboard – View pie chart with post distribution (admin only)


Setup & Installation

1. Create the Next.js Project

npx create-next-app@latest nexauth-app

cd nexauth-app

2. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Update tailwind.config.js and add Tailwind to globals.css:

@tailwind base;

@tailwind components;

@tailwind utilities;

3. Install ApexCharts

npm install react-apexcharts apexcharts


4. Google Maps Embed Setup

Use an iframe for Google Maps:

<iframe

src={`https://www.google.com/maps?q=LATITUDE,LONGITUDE&z=15&output=embed`}

width="100%"

height="300"

loading="lazy"

className="rounded-md"

/>

5. Start the Development Server

npm run dev

Deployment:

1. Push to GitHub

git init

git add .

git commit -m "Initial commit"

git remote add origin https://github.com/your-username/nexauth-app.git

git push -u origin main


2. Deploy to Vercel

Go to Vercel

Import your GitHub repository

Follow the deployment steps (default settings work fine)

Credits

Data from JSONPlaceholder

Charts via ApexCharts

Map embed from Google Maps

You might also like