Skip to content

Home

Jump to bottom
Daniel Grady edited this page Mar 11, 2024 · 13 revisions

Overview

This project aims to create a 1-to-1 clone of a Disney website's item details page, focusing on design accuracy and functionality replication

Engineer Team:

  • Daniel Grady
  • Matt Harlow
  • Giselle Ross
  • Ruben Flores
  • Yersson Ceballos

Technologies Used

  • Frontend Framework: React
  • Backend Framework: Next JS
  • Database: PostgreSQL

Why we chose Next.js vs Express

Next.js offers a powerful and feature-rich framework for building modern web applications, with a focus on performance, developer experience, and scalability. While Express is a great choice for building server-side applications and APIs, Next.js provides additional benefits that make it particularly well-suited for building dynamic, SEO-friendly web applications and websites.

Here are a few reasons why using Next.js can be advantageous compared to using Express:

  • Built-in Server-Side Rendering (SSR) and Static Site Generation (SSG): Next.js provides built-in support for Server-Side Rendering and Static Site Generation, which can greatly improve performance, SEO, and user experience compared to traditional client-side rendering approaches used with Express.
  • File-based Routing: Next.js offers a simple and intuitive file-based routing system, where each file in the pages directory corresponds to a route in the application. This eliminates the need for manual route configuration, making development more efficient and reducing boilerplate code.
  • Automatic Code Splitting: Next.js automatically splits code into smaller chunks, loading only the necessary JavaScript for each page. This can result in faster initial page loads and better performance, especially for larger applications.
  • API Routes: Next.js provides an easy way to create API routes alongside your pages, allowing you to build API endpoints directly within your Next.js application without needing a separate server setup. This simplifies development and deployment, making it easier to build full-stack applications.

Development Process

How to build a Next.js app

  • Install node:
  • Create a Next.js App with CLI command: 
       npx create-next-app my-next-app
  • Navigate to the App directory with: 
        cd my-next-app
  • Run the dev server with: 
        npm run dev

Establishing a connection with the database using a API in Next.js

  • npm install dependencies if you haven't already.
  • DATABASE_URL variable using the external connection string should be placed in .env file.
  • Inside of db/db.js, modify the following code as needed for pg pool creation.
import { config } from 'dotenv';
import { Pool } from 'pg';
config();

const pool = new Pool({
    connectionString: process.env.DATABASE_URL,
    ssl: {
        rejectUnauthorized: false,
    }
});

export async function query(sql, params = []) {
    const client = await pool.connect();

    try {
        console.log('Connected to postgres database');
        const res = await client.query(sql, params);
        return res.rows;
    } catch (err) {
        console.error(err);
    } finally {
        // finally block is important to release the client from the pool so that it does not exhaust the resources of postgres. 
        client.release();
    }
}
  • Inside of pages/api you will find routes destructuring the {query} function from db.js for api needs. View this code from item.js for example:
import { query } from '../../db/db.js';

export default async function handler(req, res) {
    const result = await query('SELECT * FROM item');
    res.json(result);
}
  • Finally run npm run dev and navigate to /api/{routename} to test db connection.

Deployment Details

For the deployment of our database, we utilized Render, a platform that simplifies the deployment process.

Documentation

The link below has a mini guide on how to use and set up routes using Next JS

Set up Routes in Next JS

Carousel code

react-multi-carousel

Filing/Naming Conventions for Components, Pages (Routes), and API Endpoints in Next.js

Components:

  • Naming:
    • Components should be named using PascalCase (camelCase with the first letter capitalized.
    • For example: Header.js, LoginForm.js, ProductCard.js
  • Filing:
    • Components are organized in the ./app/components directory.

Pages (Routes):

  • Naming & Filing:
    • When creating new pages for a web application, a new subdirectory should be created within the 'app' directory that is named how it will be used at the end of the URL.
    • Then within that new subdirectory, create a page.js file.
    • For example, if creating a dashboard page, create a 'dashboard' folder within the 'app' directory, and then create a page.js file inside it. In the following example '.tsx' naming is used but create with a '.js' file.

API Endpoints:

  • Naming:

    • API endpoint files should be named how they will be used when utilizing the Fetch API to make a database query.
    • For example, if naming an API endpoint file 'item.js' that allows a querying all the data from the Items database table, the Fetch API should be used with the URL http://localhost:3000/api/item if being used in a local development environment.

  • Filing:

    • API endpoint files are located within the 'pages/api' directory, located within the root directory.
Clone this wiki locally