Build a Project Portal with Next.js, Tailwind CSS, and Firebase

Learn how to build a stunning project portal application using Next.js, Tailwind CSS, React, and Firebase. This project provides a platform for users and developers to showcase their projects. The portal includes features like Google authentication, project submission, and user profiles. An accompanying video walks through the full process.

This tutorial guides you through building a responsive project portal from scratch. It covers essential technologies like Next.js, Tailwind CSS, Firebase Firestore for data storage, and NextAuth.js for Google authentication. You’ll learn how to display project information, implement user authentication, enable project submissions, manage user profiles, and ensure the application is responsive across different screen sizes.

Project Overview

The project portal application allows users to discover and showcase various projects. The home screen displays a list of projects with key information. Clicking on a project reveals more details, including images, technology stack, source links, and the user who posted it.

Key features include:

• Displaying project details with images and descriptions.
• Filtering projects by technology.
• Providing source links and demo URLs.
• User authentication with Google.
• Project submission functionality.
• User profile management.
• Responsive design for various screen sizes.

Technology Stack

This project leverages a modern technology stack to provide a robust and scalable solution. Here’s a breakdown of the key technologies used:

• Next.js: A React framework for building performant and SEO-friendly web applications.
• Tailwind CSS: A utility-first CSS framework for rapidly styling the application.
• React: A JavaScript library for building user interfaces.
• Firebase: A Backend-as-a-Service (BaaS) platform providing Firestore database and storage.
• NextAuth.js: An authentication library for Next.js applications.

Setting Up the Development Environment

Before diving into the code, it’s crucial to set up your development environment. Here’s how to get started:

• Install Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from the official Node.js website.
• Create a Next.js project: Use the `create-next-app` command to scaffold a new Next.js project. Open your terminal, navigate to your desired project directory, and run the following command:

npx create-next-app project-showcase-portal

Replace "project-showcase-portal" with your desired project name. The command will create a new directory with the basic Next.js project structure.

• Navigate to the project directory: Once the project is created, navigate into the project directory using the `cd` command:

cd project-showcase-portal

Firebase Integration

Firebase is used for backend functionalities such as data storage (Firestore) and image storage. To integrate Firebase into your project:

• Create a Firebase project: Go to the Firebase Console and create a new project.
• Configure Firebase SDK: Add the Firebase SDK to your Next.js project by installing the `firebase` package.

npm install firebase

• Initialize Firebase: Create a `firebase.js` file in your project to initialize Firebase with your project’s configuration. You’ll find the configuration details in your Firebase project settings.

javascript // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase/storage";

// Your web app’s Firebase configuration const firebaseConfig = { apiKey: "[YOUR_API_KEY]", authDomain: "[YOUR_AUTH_DOMAIN]", projectId: "[YOUR_PROJECT_ID]", storageBucket: "[YOUR_STORAGE_BUCKET]", messagingSenderId: "[YOUR_MESSAGING_SENDER_ID]", appId: "[YOUR_APP_ID]" };

// Initialize Firebase const app = initializeApp(firebaseConfig); export const db = getFirestore(app); export const storage = getStorage(app);

Replace the placeholder values with your actual Firebase configuration.

Implementing User Authentication with NextAuth.js

NextAuth.js simplifies the process of implementing authentication in Next.js applications. To set up Google authentication:

• Install NextAuth.js: Install the `next-auth` package.

npm install next-auth

• Configure NextAuth.js: Create an `[…nextauth].js` file in the `pages/api/auth` directory. This file will handle the authentication routes.

javascript import NextAuth from "next-auth" import GoogleProvider from "next-auth/providers/google"

export default NextAuth({ providers: [ GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET }) ], secret: process.env.NEXTAUTH_SECRET })

Remember to set the GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and NEXTAUTH_SECRET environment variables. You can obtain the Google Client ID and Secret from the Google Cloud Console. The NEXTAUTH_SECRET should be a random string for security.

After setting these, you can use the signIn and signOut methods from next-auth/react to manage user authentication.

Styling with Tailwind CSS

Tailwind CSS provides a utility-first approach to styling, making it easy to create custom designs without writing CSS from scratch.

• Install Tailwind CSS: Install `tailwindcss`, `postcss`, and `autoprefixer` as development dependencies.

npm install -D tailwindcss postcss autoprefixer

• Initialize Tailwind CSS: Generate the `tailwind.config.js` and `postcss.config.js` files.

npx tailwindcss init -p

• Configure Tailwind CSS: Add the Tailwind directives to your `styles/globals.css` file.

css @tailwind base; @tailwind components; @tailwind utilities;

Now you can use Tailwind CSS classes directly in your React components to style the application.

Fetching and Displaying Data from Firestore

To fetch project data from Firestore and display it in your application:

• Create a Firestore collection: In your Firebase console, create a Firestore collection to store project data.
• Fetch data: Use the `getDocs` function from the `firebase/firestore` library to fetch data from the collection.

javascript import { collection, getDocs } from "firebase/firestore"; import { db } from ‘../firebase’;

async function getProjects() { const projectsCollection = collection(db, ‘projects’); const projectSnapshot = await getDocs(projectsCollection); const projectList = projectSnapshot.docs.map(doc => ({ id: doc.id, …doc.data() })); return projectList; }

• Display data: Use the fetched data to render the project list in your React components.

javascript import { useEffect, useState } from ‘react’; import { getProjects } from ‘../lib/data’;

function ProjectList() { const [projects, setProjects] = useState([]);

useEffect(() => { async function loadProjects() { const projectData = await getProjects(); setProjects(projectData); } loadProjects(); }, []);

return (

{projects.map(project => (
• {project.title}
))}

); }

Remember to handle loading states and errors appropriately.

Key Takeaways

Building a project portal involves integrating multiple technologies to create a seamless user experience. Here are some key takeaways from this process:

• Next.js provides a powerful framework for building modern web applications with React.
• Tailwind CSS simplifies styling with its utility-first approach.
• Firebase offers a comprehensive backend solution for data storage and authentication.
• NextAuth.js streamlines the implementation of authentication with various providers.
• Responsive design ensures the application is accessible on different devices.

Frequently Asked Questions

What is Next.js?

Next.js is a React framework that enables features like server-side rendering and static site generation, making it ideal for building performant web applications.

Why use Tailwind CSS?

Tailwind CSS offers a utility-first approach to styling, allowing developers to rapidly create custom designs without writing verbose CSS.

How does Firebase simplify backend development?

Firebase provides a suite of backend services, including a NoSQL database (Firestore), authentication, and hosting, which simplifies backend development and reduces the need for custom server infrastructure.

What is NextAuth.js used for?

NextAuth.js is an authentication library for Next.js that supports various authentication providers, making it easy to implement secure user authentication.

How can I make my application responsive?

Using CSS frameworks like Tailwind CSS, you can easily create responsive layouts by applying different utility classes based on screen size.

In conclusion, building a project portal with Next.js, Tailwind CSS, and Firebase involves setting up the development environment, integrating Firebase for backend functionalities, implementing user authentication with NextAuth.js, and styling the application with Tailwind CSS. By following these steps, you can create a robust and user-friendly platform for showcasing projects and connecting with the developer community. Remember to consult the official documentation for each technology to deepen your understanding and explore advanced features.

Credit: Creator

Credit: Writer

Credit: Reviewer