DEV Community: Swahilipot Developers

Technical Overview of Next.js.

Milka Mutinda — Tue, 17 Sep 2024 15:44:33 +0000

Lessons learned in nextjs:
**

Creating the new project.

Key in the following command in the terminal .

npm install -g pnpm

Then to create an app, enter the following command in the terminal.

npm install -g pnpm

Enter the following command still in the terminal to create the app in the desired folder.

npx create-next-app@latest nextjs-dashboard 
      example "https://github.com/vercel/next- 
      learn/tree/main/dashboard/starter-example" - 
      -use-pnpm

Running development server.

To install the project packages, run the below command:

pnpm i

Followed by the following command to start the development server:

pnpm dev

Adding styles.

To add global styles in your application, navigate to layout.tsx file under app folder and key import the global.css file

import '@/app/ui/global.css';

Creating a Home Page.

To create an attractive home page, elements like fonts and images are crucial. We will start by adding fonts in the project. By the use of next/font module, Next.js automatically optimizes in the application and downloads the font files at build time to host them with the other static assets.

 _import { Inter, Lusitana } from 'next/font/google';_

_export const inter = Inter({ subsets: ['latin'] });_

export const lusitana = Lusitana({
    weight: ['400', '700'],
    subsets: ['latin'],
});

To add the desktop image, we use the component. In the /app/page.tsx file, import the component from next/image and then add the image under the comment.

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana} from '@/app/ui/fonts';
_import Image from 'next/image';_
//..........    
        _<Image
        src="/hero-mobile.png"
        width={560}
        height={620}
        className="block md:hidden"
        alt="Screenshot of the dashboard project showing mobile version"
      />_

        </div>
      </div>
    </main>
  );
}

Nesting Routes.
Create folders that are used to nest routes. For example, create folders under the app folder, like a dashboard and invoices that map to a URL to showcase your app.

Navigating through Pages.
To navigate through a page, you need to use component to link between pages in the application. To use this component, go to /app/ui/dashboard/nav-links.tsx, and import the Link component from next/link. Replace with .

/...
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
/...

Setting Up Database.**

Here, you will start by pushing your repository to Github for ease in setting up the database and deploying. Set up a vercel account and import your already created folder containing your app then deploy.

Afterwards, connect store, create new, postgres then continue. Once you are done with that, go to .env.local tab, click show secret and copy snippet.

POSTGRES_URL="postgres://default:W95RsBPGcbeU@ep-cold-bar-a457mttq-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_PRISMA_URL="postgres://default:W95RsBPGcbeU@ep-cold-bar-a457mttq-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NO_SSL="postgres://default:W95RsBPGcbeU@ep-cold-bar-a457mttq-pooler.us-east-1.aws.neon.tech:5432/verceldb"
POSTGRES_URL_NON_POOLING="postgres://default:W95RsBPGcbeU@ep-cold-bar-a457mttq.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_USER="default"
POSTGRES_HOST="ep-cold-bar-a457mttq-pooler.us-east-1.aws.neon.tech"
POSTGRES_PASSWORD="W95RsBPGcbeU"
POSTGRES_DATABASE="verceldb"

Seeding The Database.

The database is seeded inside of /app, in a folder called seed. Make sure to uncomment the file. The folder contains a Next.js Route Handler, called route.ts, that will be used to seed your database.
Ensure your local development server is running with pnpm run dev and navigate to your localhost. Afterwards, a confirmation message will appear to show a success.

Fetching Data For The Dashboard Overview Page.
There are several ways of fetching data from the database, like using server components where in next.js we use react server components.
There is also using SQL where you'll write dataabase queries using vercel postgres created previously and SQL.

import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';

export default async function Page() {
  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}
        {/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}
        {/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}
        {/* <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        /> */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        {/* <RevenueChart revenue={revenue}  /> */}
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

Handling Errors.
To handle errors in your code, you have to add JavaScript's try/catch statements inside your server actions /app/lib/actions.ts, to allow handling of errors.

Accessibility.
Accessibility is crucial for making web applications usable for everyone. Next.js, being a React-based framework, offers a range of techniques and tools to ensure that your application is accessible.

Adding Metadata.
Adding metadata to your Next.js application is essential for several reasons, primarily focused on improving SEO, accessibility, and sharing your web content on social media.

Nextjs-Dashboard Project .

Tribal Chief — Tue, 17 Sep 2024 11:21:36 +0000

In the past two weeks, I have embarked on an intensive development journey, creating a sophisticated dashboard application using the Next.js framework along with Typescript, React, and various other technologies. This article delves into the specific tasks I tackled, the technologies I employed, and the insights I gained.

here is a look at the dashboard app

setting up the project

i used pnpm package manager as it is fast than npm or yarn i installed it globally bz running

npm install -g pnpm

creating a nextjs app i used this command :

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

This command uses create-next-app, a Command Line Interface (CLI) tool that sets up a Next.js application. In the command above, it also using the --example flag with the starter example for this project

1. Global Styles and Tailwind CSS

One of the initial steps in my project was to set up global styles using Tailwind CSS. Tailwind CSS is a utility-first CSS framework that facilitates rapid UI development by allowing developers to apply pre-defined classes directly in the markup. I integrated Tailwind CSS by configuring the tailwind.config.js file and incorporating the necessary CSS imports into the global stylesheet. This setup streamlined the design process and ensured consistent styling across the application.

Adding Global Styles

To apply global styles across the application, i used a global CSS file. In a Next.js project, i import this CSS file in the root layout.

// /app/layout.tsx

import '@/app/ui/global.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

This approach ensures that the styles defined in global.css are applied throughout your app.

and in /* /app/ui/global.css */

`/* /app/ui/global.css */`
@tailwind base;
@tailwind components;
@tailwind utilities;

These directives set up Tailwind's base styles, components, and utility classes, providing a foundation for the design

2. CSS Modules

For more component-specific styling, I employed CSS Modules. CSS Modules offer a scoped approach to CSS, ensuring that styles are applied only to the component they are defined in. This modularity prevents style conflicts and enhances maintainability. I utilized CSS Modules by creating .module.css files and importing them into React components, thereby achieving encapsulated and reusable styles.

Conditionally Adding Class Names with clsx

For dynamic styling, i used the clsx utility package. This package helps conditionally apply class names based on certain conditions.

for instance you will first need to install clsx

npm install clsx

then use in the component

import clsx from 'clsx';

export default function Button({ isActive }: { isActive: boolean }) {
  return (
    <button className={clsx('p-2 rounded', { 'bg-blue-500': isActive, 'bg-gray-500': !isActive })}>
      Click me
    </button>
  );
}

In this example, the button's background color changes based on the isActive prop.

3. Setting Up and Seeding a PostgreSQL Database for Your Next.js Project

To effectively manage data in your Next.js application, setting up and seeding a PostgreSQL database is essential. This guide will walk you through the process of configuring a PostgreSQL database using Vercel's PostgreSQL service and seeding it with initial data. By the end of this guide, you'll have a fully functional database ready for your Next.js dashboard application.

Table of Contents :

Create a GitHub Repository
Create a Vercel Account and Deploy Your Project
Create and Link Your PostgreSQL Database
Seed Your Database
Exploring and Querying Your Database -Troubleshooting

Create a GitHub Repository

If you haven’t set up a repository yet, follow this GitHub guide.
to get started. For a simplified workflow, consider using the GitHub Desktop App.

Note: You can use other Git providers like GitLab or Bitbucket if preferred.

Create a Vercel Account and Deploy Your Project

** Sign Up for Vercel:**

    Visit vercel.com/signup to create an account.
    Choose the free "Hobby" plan.
    Select "Continue with GitHub" to connect your GitHub and              Vercel accounts.

** Import and Deploy Your Project:**
After signing up, you'll be redirected to the Vercel dashboard.
Click "Import Project" and select your GitHub repository.
Name your project and click "Deploy."

boooom!!! there you go the project is now deployed. Vercel will automatically redeploy the application with each push to the main branch and provide instant previews for pull requests.

Create and Link Your PostgreSQL Database

Access Your Vercel Dashboard:
Navigate to your project’s dashboard on Vercel.
Click "Continue to Dashboard" and select the "Storage" tab.
Create a New Database:
Click "Connect Store" → "Create New" → "Postgres" → "Continue."
Accept the terms, name your database, and set the region to Washington D.C (iad1), which is the default for new Vercel projects.
Copy Database Secrets:
- Go to the .env.local tab in Vercel, click "Show secret," and copy the snippet.
  - Rename the .env.example file in your project to .env and paste the copied contents from Vercel.

Important: Ensure .env is listed in your .gitignore file to prevent exposing your database secrets in version control.

Install the Vercel Postgres SDK:

Run the following command to install the Vercel Postgres SDK:

pnpm i @vercel/postgres

Seed Your Database

Seeding your database involves populating it with initial data to test your application.

Prepare the Seed Script:
- Inside the /app directory, locate and uncomment the seed folder. This folder contains route.ts, a Next.js Route Handler used to seed your database.
Run the Seed Script:
Ensure your local development server is running with:

pnpm run dev

after that you can Navigate to http://localhost:3000/seed in your browser. You should see a message "Database seeded successfully."
**

4. Adding Authentication to Your Next.js Dashboard Application

I integrated authentication functionalities, including login and logout features. This process involved updating the login form, implementing secure authentication mechanisms, and ensuring proper session management.

here i will take you through :

Setting Up NextAuth.js
Protecting Routes with Middleware
Implementing Password Hashing
Adding Authentication Providers
Updating the Login Form
Adding Logout Functionality
Testing Your Implementation

Setting Up NextAuth.js

To add authentication to the application,i used NextAuth.js. This library simplifies session management, sign-ins, and sign-outs.

Install NextAuth.js

Run the following command to install the beta version compatible with Next.js 14:

pnpm i next-auth@beta

2.Generate a Secret Key

Generate a secret key for encrypting cookies:

openssl rand -base64 32

Add this key to your .env file:

AUTH_SECRET=your-secret-key

Configure NextAuth.js

Create an auth.config.ts file in the root of your project:

// auth.config.ts

import type { NextAuthConfig } from 'next-auth';

export const authConfig = {
  pages: {
    signIn: '/login',
  },
} satisfies NextAuthConfig;

This configuration sets the custom sign-in page route.

Protecting Routes with Middleware

To ensure only authenticated users can access specific routes, use Next.js Middleware.

Create Middleware

Create a middleware.ts file in the root of your project:

// middleware.ts

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

export default NextAuth(authConfig).auth;

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};

This setup ensures that Middleware runs on the specified paths, protecting the routes by checking authentication before rendering.

Implementing Password Hashing

Hashing passwords adds an extra layer of security by transforming passwords into a fixed-length string.

Create an Authentication Module

Create an auth.ts file for handling authentication logic:

// auth.ts



import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
import bcrypt from 'bcrypt';
import { sql } from '@vercel/postgres';
import type { User } from '@/app/lib/definitions';

async function getUser(email: string): Promise<User | undefined> {
  try {
    const user = await sql<User>`SELECT * FROM users WHERE email=${email}`;
    return user.rows[0];
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw new Error('Failed to fetch user.');
  }
}

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);

        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email);
          if (user && await bcrypt.compare(password, user.password)) {
            return user;
          }
        }
        return null;
      },
    }),
  ],
});

This configuration sets up the Credentials provider and checks if the entered password matches the hashed password stored in the database

Adding Authentication Providers

The Credentials provider allows users to log in with a username and password. While other providers like Google or GitHub are available, i will focus on Credentials for simplicity.

Update the Authentication Configuration

// auth.ts



import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      // Configuration for Credentials provider
    }),
  ],
});

Updating the Login Form

To connect the authentication logic with the login form, i use React’s useActionState to handle form submissions and display errors.

1.Create the Login Form

// app/ui/login-form.tsx

'use client';

import { lusitana } from '@/app/ui/fonts';
import { AtSymbolIcon, KeyIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline';
import { ArrowRightIcon } from '@heroicons/react/20/solid';
import { Button } from '@/app/ui/button';
import { useActionState } from 'react';
import { authenticate } from '@/app/lib/actions';

export default function LoginForm() {
  const [errorMessage, formAction, isPending] = useActionState(authenticate, undefined);

  return (
    <form action={formAction} className="space-y-3">
      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
        <h1 className={`${lusitana.className} mb-3 text-2xl`}>Please log in to continue.</h1>
        <div className="w-full">
          <div>
            <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="email">Email</label>
            <div className="relative">
              <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                id="email"
                type="email"
                name="email"
                placeholder="Enter your email address"
                required
              />
              <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
          <div className="mt-4">
            <label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="password">Password</label>
            <div className="relative">
              <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                id="password"
                type="password"
                name="password"
                placeholder="Enter password"
                required
                minLength={6}
              />
              <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
        </div>
        <Button className="mt-4 w-full" aria-disabled={isPending}>
          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
        </Button>
        <div className="flex h-8 items-end space-x-1" aria-live="polite" aria-atomic="true">
          {errorMessage && (
            <>
              <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
              <p className="text-sm text-red-500">{errorMessage}</p>
            </>
          )}
        </div>
      </div>
    </form>
  );
}

This form connects to the authenticate action, displays pending states, and handles error messages.

Adding Logout Functionality

Adding a logout button to the side navigation to enable users to sign out.

1.Update the SideNav Component

// ui/dashboard/sidenav.tsx


import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links';
import AcmeLogo from '@/app/ui/acme-logo';
import { PowerIcon } from '@heroicons/react/24/outline';
import { signOut } from '@/auth';

export default function SideNav() {
  return (
    <div className="flex h-full flex-col px-3 py-4 md:px-2">
      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
        <NavLinks />
        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
        <form
          action={async () => {
            'use server';
            await signOut();
          }}
        >
          <button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-6" />
            <div className="hidden md:block">Sign Out</div>
          </button>
        </form>
      </div>
    </div>
  );
}

This button calls the signOut function from auth.ts to log the user out.

Testing the Implementation

You should now be able to log in and out of the application using the credentials:

Email: user@nextmail.com
Password: 123456

5. Adding Metadata to the Next.js Application

What is Metadata?

Metadata provides additional details about a webpage that are not visible to users but are crucial for search engines and social media platforms. It resides in the <head> section of your HTML document and helps these systems understand and categorize your content more effectively.

To improve SEO and enhance social media presence, I incorporated metadata into the application. Metadata, embedded within the

element of HTML, provides search engines and social media platforms with additional information about the page. This included adding Open Graph tags to optimize link previews on social media.

Adding Metadata in Next.js

Next.js provides a Metadata API that allows you to configure metadata in a flexible and organized manner. You can add metadata either through configuration files or dynamically within your components.

Config-Based Metadata
define static metadata in your layout.js or page.js files. Here’s how you can set up basic metadata:

Root Layout Metadata In the root layout.tsx file, define a metadata object:

// app/layout.tsx

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

export default function RootLayout() {
  // ...
}

This metadata will be applied globally to all pages that use this layout.

2.Page-Specific Metadata

mmh, so To override or add metadata specific to a page, define the metadata object in the page file:
// app/dashboard/invoices/page.tsx

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

This page-level metadata will override the global metadata for this specific page.

Dynamic Page Titles with Templates
To avoid repetitive metadata and manage dynamic titles more efficiently, i usedt the title.template field:

yeey !!

Set Up a Template in the Root Layout // app/layout.tsx

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

The %s placeholder will be replaced with the page-specific title.

Use the Template in a Page // app/dashboard/invoices/page.tsx

export const metadata: Metadata = {
  title: 'Invoices',
};

This setup results in a page title like "Invoices | Acme Dashboard."

The past two weeks have been a period of significant learning and development. By employing a range of technologies and best practices, I have built a robust and efficient Next.js dashboard application. From optimizing performance to implementing secure data handling, each task has contributed to a comprehensive and scalable solution. This project not only enhanced my technical skills but also provided practical experience in building modern web applications.

Setting Up Django and Building a Poll App: My Last Two Weeks of Work

Ashley Obano — Mon, 16 Sep 2024 19:13:12 +0000

Over the past two weeks, I've been working on setting up Django from scratch and building a simple poll application. This article will walk you through everything I did, starting from installing Python and Django, setting up a virtual environment, creating a new project, and building a functional app called polls.

1. Setting Up Python and Django
To begin, I made sure that Python was installed on my system. If you haven't installed it yet, you can download it from python.org.

Step 1: Install Python and Set Up a Virtual Environment
I wanted to keep my project dependencies isolated, so I used a virtual environment.

# Install virtualenv if you don't have it
pip install virtualenv

# Create a virtual environment
virtualenv myenv

# Activate the environment
# On Windows:
myenv\Scripts\activate
# On macOS/Linux:
source myenv/bin/activate

Step 2: Install Django
Once the environment was activated, I installed Django.

pip install django

I then confirmed the installation by running:

django-admin --version

2. Starting a New Django Project: mysite
Now, it was time to create my Django project. I decided to call it mysite.

django-admin startproject mysite
cd mysite

This created the basic structure for a Django project with settings and configurations.

3. Creating a New Django App: polls
After setting up the project, I created a new app called polls, which would contain all the logic and views for my poll application.

python manage.py startapp polls

I added the new app to INSTALLED_APPS in mysite/settings.py:

INSTALLED_APPS = [
    # other installed apps
    'polls',
]

4. Defining the Models
I started by defining two models: Question and Choice. A Question has a question text and a publication date, while a Choice has a reference to a Question and stores text along with a vote count.

Here’s the models.py file in the polls app:

# models.py
import datetime
from django.db import models
from django.contrib import admin
from django.utils import timezone

class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')

    def __str__(self):
        return self.question_text

    @admin.display(
        boolean=True,
        ordering='pub_date',
        description='Published recently?',
    )
    def was_published_recently(self):
        now = timezone.now()
        return now - datetime.timedelta(days=1) <= self.pub_date <= now

class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

    def __str__(self):
        return self.choice_text

5. Creating the Database and Running Migrations
Next, I created the database and applied migrations:

python manage.py migrate

I then created migration files for the polls app:

python manage.py makemigrations polls
python manage.py migrate

6. Writing Views for the Poll App
I wrote several views to handle displaying a list of questions, showing question details, and showing voting results. These views are class-based, using Django’s built-in generic views.
Creating Views for Polls
I then created the views that control how data is displayed to the user. I used Django's generic views to keep things simple.

Here’s the views.py file:

# views.py
from django.http import HttpResponse
from django.shortcuts import get_object_or_404, render
from django.urls import reverse
from django.views import generic
from django.utils import timezone
from .models import Question, Choice

class IndexView(generic.ListView):
    template_name = 'polls/index.html'
    context_object_name = 'latest_question_list'

    def get_queryset(self):
        """Return the last five published questions."""
        return Question.objects.order_by('-pub_date')[:5]

class DetailView(generic.DetailView):
    model = Question
    template_name = 'polls/detail.html'

    def get_queryset(self):
        """Exclude questions that aren't published yet."""
        return Question.objects.filter(pub_date__lte=timezone.now())

class ResultsView(generic.DetailView):
    model = Question
    template_name = 'polls/results.html'

def vote(request, question_id):
    return HttpResponse(f"You're voting on question {question_id}.")

IndexView: Displays a list of the latest questions.
DetailView: Shows the details of a specific question and its choices.
ResultsView: Displays the results of a poll after voting. The vote() function handles the user's vote submission.

7. Configuring URLs
I added URL patterns to the urls.py file in the polls app to link each view to a specific URL.

# urls.py
from django.urls import path
from . import views

app_name = 'polls'
urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('<int:pk>/', views.DetailView.as_view(), name='detail'),
    path('<int:pk>/results/', views.ResultsView.as_view(), name='results'),
    path('<int:question_id>/vote/', views.vote, name='vote'),
]

8. Creating Templates for Views
Finally, I created HTML templates to display the questions and results. The templates are placed in the polls/templates/polls/ folder.

index.html

{% if latest_question_list %}
    <ul>
        {% for question in latest_question_list %}
            <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
        {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

detail.html

<form action="{% url 'polls:vote' question.id %}" method="post">
    {% csrf_token %}
    <fieldset>
        <legend><h1>{{ question.question_text }}</h1></legend>
        {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
        {% for choice in question.choice_set.all %}
            <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
            <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
        {% endfor %}
    </fieldset>
    <input type="submit" value="Vote">
</form>

result.html

<h1>{{ question.question_text }}</h1>
<ul>
    {% for choice in question.choice_set.all %}
        <li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
    {% endfor %}
</ul>
<a href="{% url 'polls:detail' question.id %}">Vote again?</

Running the Application
To test the application, I ran the development server:

python manage.py runserver

Navigating to http://127.0.0.1:8000/polls/ displayed the list of polls, and I could view details, vote, and see results.

Over the past two weeks, I learned how to set up Django, create a project, and build a fully functioning poll app. It was fascinating to see how everything connects in Django, from models to views to templates. This has been a great experience, and I’m excited to learn more about Django's powerful features!

NEXTJS GUIDELINE

Mumina — Mon, 16 Sep 2024 14:35:57 +0000

Next.js has quickly emerged as one of the most popular frameworks for building React applications. Developed by Vercel, Next.js offers an opinionated and streamlined approach to React development, making it easier to build full-stack web applications with a focus on performance, SEO, and developer experience.
Next.js is a React-based framework that allows developers to build server-side rendering (SSR) and static web applications with ease.

We will start what our finance dashboard will include

A public home page. 2.A login page. 3.Dashboard page that are protected by authentication. 4.Ability for user to add edit and delete invoices. Here is an overview of features that will learn: styling optimization routing data mutation error handling and authentication etc. There is a few things one must do before starting , a system requires to install Node.js 18.17 you'll need a Github account and a vercel account.

After running some commands we will explore our project and should have such folders;
/app: Contains all the routes, components, and logic for your application, this is where you'll be mostly working from.
/app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions.
/app/ui: Contains all the UI components for your application, such as cards, tables, and forms. To save time, we've pre-styled these components for you.
/public: Contains all the static assets for your application, such as images.
will the use this commands to install pnpm i and to start the development server pnpm dev

Dashboard page includes:
Total Revenue Collected: The total revenue that has been received by the company.
Total Revenue Pending: Revenue that has been invoiced but not yet collected.
Total Invoices: Total number of invoices issued.
Total Customers: The number of customers the company has.
Revenue Chart: A line chart displaying the revenue trends over a period of time.
invoice page
Customer Information
Invoice Date
Amount Due
Status (e.g., Paid, Unpaid, Pending)
*Authentication *
on authentication we add a login route were we enable the user to access the web and view customers information, we add passwords for it to be more secured.

NEXT .JS AND DJANGO OVERVIEW

khadyM-hub — Mon, 16 Sep 2024 14:13:14 +0000

Building a dashboard application in Node.js involves creating a real-time, interactive interface to display and manage data. Node.js enables efficient handling of asynchronous operations, making it ideal for fetching data from APIs, integrating databases, and using WebSocket’s for live updates. With frameworks like Express developers can create dynamic charts, tables, and other data visualizations, ensuring the dashboard is both responsive and scalable for various user needs.

Why Choose Next.js for a Dashboard

Server-Side Rendering . Next.js makes server-side rendering easy, which means your app can load faster and perform better.
Static Site Generation. If you have parts of your dashboard that don’t need frequent updates, you can pre-render those sections for even faster load times.
Built-in Routing. No need to install additional libraries for routing. Next.js has a simple and intuitive routing system that automatically creates routes based on your file structure.
API Routes. Next.js allows you to create your own backend APIs within the project, which can be particularly useful when handling data in your dashboard.
React-Powered. Since Next.js is built on React, you can take advantage of Reacts ecosystem, such as components, hooks, and context, to make your app more modular and interactive.

Planning Your Dashboard
**A dashboard typically displays several types of information, such as:
Metrics and Statistics: Charts, graphs, and key performance indicators (KPIs).
User Activity: Information about what user is doing, such as recent purchases or logins.
Notifications Alerts or updates that need attention.
Data Management: Tools for managing or editing data (e.g., CRUD functionalities).

With Next.js, you can create a flexible and scalable dashboard, but keep in mind the specific needs of your project as it will guide the type of data and tools you need to include.

**
Components of a Dashboard**

Navigation Bar: This is a menu that helps users move around different sections of the dashboard. It usually contains links to key sections like “Reports,” “Settings,” or “User Management.”
Sidebar: In more complex dashboards, a sidebar is often used to give users quick access to key features and data without taking up too much screen space.
Main Content Area: This is the heart of the dashboard. It’s where all your data visualizations, forms, tables, and other components will be displayed. You’ll likely want to structure it in a way that prioritizes important information while still keeping it flexible enough to accommodate different types of content.
Widgets and Charts: Visual elements like graphs and charts are crucial for representing data in an easily digestible manner. You can use libraries like Chart.js or D3.js in conjunction with Next.js to display data in an attractive and interactive way.
Search and Filters: For large datasets, you might need to implement search bars or filters so users can easily find the information they’re looking for.

** Building the Dashboard**

Setting Up the Project

Start by creating a new Next.js project. Once you have Next.js installed, think about the layout of your dashboard. Next.js makes it easy to create reusable layouts by allowing you to define a global layout file. This is where you’ll define the structure of your navigation bar, sidebar, and main content area.

Your layout file will act as a template for all the different pages in your dashboard, so you won’t need to repeat yourself for every page.

Creating the Navigation and Sidebar
Your navigation and sidebar are key to making your dashboard user-friendly. Next.js allows you to create separate components for these elements, which makes your code more modular. You can think of the navigation bar as a simple horizontal menu that sits at the top of the page, while the sidebar provides easy access to different sections of the dashboard.
A good practice is to keep the sidebar collapsible. This means users can expand it when needed and hide it when they want to focus on the main content area.
Displaying Data in the Main Content Area

The main content area is where you will showcase the most important data. Whether you’re displaying user activity, sales data, or performance metrics, the main content area should be clean, organized, and easy to navigate. Next.js, being React-based, allows you to manage data flow seamlessly by using state and props. You’ll likely want to use some kind of data-fetching method, such as:

Static Site Generation: Pre-fetch data during build time if it doesn't change frequently.
Server-Side Rendering: Fetch data on every request for frequently updated data.
Client-Side Fetching: Use a hook like use Effect or libraries like SWR to fetch data from your APIs after the page has loaded.

Depending on the type of data you're working with, you can choose the most appropriate data-fetching method for your use case.

Integrating Charts and Visualizations

Charts and visualizations are a big part of what makes a dashboard useful. Whether you're visualizing sales data or tracking performance metrics, integrating a charting library with Next.js is relatively straightforward.
Charts give users a quick snapshot of data trends and insights. Since Next.js handles client-side and server-side rendering efficiently, it ensures that charts load quickly and perform well.

Handling API Requests and Backend Integration
One of the key strengths of Next.js is that it allows you to create API routes within the same project. These API routes can serve as the backend for your dashboard, fetching data from databases, external services, or other APIs.
Search and Filtering Features
If your dashboard manages a large amount of data, you’ll need to give users tools to find the specific information they need. A search bar or filter option is essential in such cases. By integrating client-side search functionalities, users can instantly search through data without needing to reload the page.

** Best Practices for Dashboard Development**

Building a dashboard with Next.js is a powerful way to create a high-performance, interactive application.

Optimize for Performance: Dashboards often handle large amounts of data, so it’s crucial to optimize performance by using server-side rendering where needed, lazy loading components, and optimizing API calls.
Keep It Modular: Next.js’ component-based architecture encourages reusability. Break your dashboard into smaller, reusable components so that you can easily update or scale parts of your application.
Mobile Responsiveness: Dashboards are often accessed on the go. Ensure that your design is mobile-friendly, providing a smooth user experience across all devices.
Security and Authentication: Dashboards often handle sensitive data, so consider implementing authentication using tools like NextAuth.js. Secure your API routes to protect sensitive data.

DJANGO

A Comprehensive Overview

*Introduction
*
Django 5.1 is a significant release of the popular Python web framework known for its simplicity and
robustness. This article provides a thorough overview of its features, improvements, and architectural
changes, offering insights into how Django 5.1 enhances web development processes.

Key Features and Improvements

Enhanced ORM Capabilities

Django 5.1 introduces several enhancements to its Object-Relational Mapping (ORM) system. These
include improvements in query optimization and additional features for complex queries. The ORM
remains a core strength of Django, providing an efficient way to interact with the database without
writing raw SQL.

Updated Middleware Framework

The middleware framework has been updated to improve performance and flexibility. Middleware
components can now be configured more easily, and new hooks are available for custom processing of
requests and responses. This change aims to streamline the development of custom middleware.

Improved Form Handling

Form handling in Django 5.1 has been refined to offer better validation and customization options.
Developers can now leverage enhanced form processing features to create more robust and user-
friendly forms.

Enhanced Security Features

Security continues to be a top priority in Django 5.1. This release includes updates to protect against
common web vulnerabilities. Improvements in authentication and authorization mechanisms ensure
that applications built with Django are secure by default.

Updated Template System

The template system in Django 5.1 has been updated to provide better performance and new features.
These updates include enhancements to template rendering and new options for template
customization.

Architecture and Design

Modular Design

Django 5.1 emphasizes a modular design, allowing developers to work on different components of their
application independently. This modularity supports better maintainability and scalability of web
applications.

Asynchronous Support

Asynchronous support has been enhanced in Django 5.1, making it easier to build asynchronous views
and handle asynchronous tasks. This improvement aligns with modern web development practices and
enhances the performance of Django applications.

Improved Admin Interface

The admin interface, a hallmark of Django, has been improved in this release. The enhancements
include better usability and additional customization options, allowing developers to tailor the admin
interface to their needs.

Development and Deployment

Development Tools

Django 5.1 introduces new development tools and improvements to existing ones. These tools aim to
enhance the development experience by providing better debugging, testing, and profiling capabilities.

Deployment Considerations

With the new release, deployment practices are also addressed. Django 5.1 includes updates that
simplify deployment and integration with various deployment environments. These updates ensure that
applications can be deployed smoothly and efficiently.

Community and Ecosystem

Community Contributions

The Django community continues to play a vital role in the framework’s development. Django 5.1
includes contributions from various community members, reflecting the collaborative nature of the
project.

Ecosystem Integration

Django 5.1 maintains compatibility with various third-party packages and tools, ensuring that developers
can continue to leverage a wide range of extensions and integrations. This compatibility supports a rich ecosystem around django

Step by step guide to build an app using :1.next.js 2.django.

liz nzisa — Mon, 16 Sep 2024 14:10:16 +0000

project Documentation: Next.js Finance App & Django Polling App

1. Next.js Finance App

Project Overview

This project is a finance application built using Next.js. It allows users to log in, view invoices, collected amounts, add or edit customers, and view customer and invoice pages. It also provides a recent revenue summary for financial tracking.

The app uses PostgreSQL as the primary database, enhanced with MySQL logic for optimized queries. The app is successfully deployed on Vercel.
**
Features
Authentication: Secure login system to access personal accounts.
Invoice Management: View, edit, and manage invoices and track the total amount collected.
Customer Management: Add, view, and edit customer information.
Revenue Summary: View the most recent revenue generated from customer invoices.
Database: PostgreSQL integrated with MySQL logic.
Deployment: Deployed on Vercel.

Installation
Step 1: Install Node.js and Next.js

Install Node.js
sudo apt update sudo apt install nodejs

Install Next.js and create a new project
npx create-next-app@latest finance-app cd finance-app npm install`

Step 2: Install PostgreSQL

Install PostgreSQL
sudo apt update sudo apt install postgresql postgresql-contrib

Start PostgreSQL
sudo service postgresql start

Step 3: Setup MySQL (Optional for Logic)

Install MySQL
sudo apt install mysql-server

Start MySQL
sudo service mysql start

Step 4: Run Development Server

Start the Next.js development server
npm run dev

Key Concepts

Routing

Next.js provides a file-based routing system. The app has routes for invoices, customers, and revenue pages:

// Example: Invoice route in pages/invoices/[id].js
import { useRouter } from 'next/router';

export default function InvoicePage() {
const router = useRouter();
const { id } = router.query;

return <div>Invoice ID: {id}</div>;

}

Data Fetching

Server-side rendering (SSR) with getServerSideProps ensures real-time data updates for viewing recent revenue and invoice details:

js

export async function getServerSideProps() {
const invoices = await fetchInvoicesFromDB();
return { props: { invoices } };
}

Form Validation

Using react-hook-form and yup for form validation when adding/editing customer information:

`import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const schema = yup.object().shape({
customerName: yup.string().required(),
});

export default function AddCustomer() {
const { register, handleSubmit } = useForm({
validationSchema: schema,
});

const onSubmit = data => console.log(data);

return (

Submit

);
}`

Error Handling

Handled via custom error pages (404.js, 500.js) to enhance the user experience:

export default function Custom404() { return <h1>404 - Page Not Found</h1>; }

Authentication

Implemented using NextAuth.js to secure login functionality:

js

`import { signIn, useSession } from 'next-auth/react';

export default function Login() {
const { data: session } = useSession();

if (session) {
return

Welcome {session.user.email}

;
}

return signIn()}>Sign In;
}
``

Styling

Styled using Tailwind CSS for responsive and modern UI design:

html

<div className="bg-gray-200 p-4"> <h1 className="text-2xl font-bold">Recent Revenue</h1> <p>Total Revenue: $5000</p> </div>

Meta Data & SEO

Handled through the Next.js

component for SEO:

<Head> <title>Finance App - Recent Revenue</title> <meta name="description" content="View your recent revenue and manage invoices" /> </Head>

Django Polling App Project Overview

This project is a polling application created using Django. It allows users to vote on polls and view poll results. The admin interface enables the creation, modification, and deletion of polls.

The project features two models: Question and Choice. Each Question has associated Choices for users to vote on, and each Choice tracks the number of votes.
Features

Public Polling: Allows users to view and vote on polls.
Admin Interface: Manage polls, add questions, and track votes.
Models:
    Question model with the question text and publication date.
    Choice model with the choice text and vote count, linked to Question.

Installation
Step 1: Install Python and Django

bash

Install Python
sudo apt update sudo apt install python3

Install Django
pip install django

Step 2: Create a Django Project

django-admin startproject polls_project cd polls_project

Start Django development server

python manage.py runserver

Step 3: Setup Database (SQLite by default)

Migrate to initialize database
python manage.py migrate

Step 4: Create Polling Models

python

models.py
from django.db import models

class Question(models.Model):
question_text = models.CharField(max_length=200)
pub_date = models.DateTimeField('date published')

class Choice(models.Model):
question = models.ForeignKey(Question, on_delete=models.CASCADE)
choice_text = models.CharField(max_length=200)
votes = models.IntegerField(default=0)`

Key Concepts

Routing

Django's URL routing mechanism is used for linking views with URLs:

python
` urls.py
from django.urls import path
from . import views

urlpatterns = [
path('', views.index, name='index'),
path('int:question_id/', views.detail, name='detail'),
path('int:question_id/vote/', views.vote, name='vote'),
]
`

Form Validation

Form validation is used when submitting votes, ensuring that valid data is submitted:

python

`forms.py
from django import forms

class VoteForm(forms.Form):
choice = forms.ChoiceField(choices=[(choice.id, choice.choice_text) for choice in choices])`

Admin Interface

The Django admin panel is used to manage questions and choices:

python
`
from django.contrib import admin
from .models import Question, Choice

admin.site.register(Question)
admin.site.register(Choice)`

Error Handling

Custom error messages are displayed if an invalid poll or vote is submitted:

python

def vote(request, question_id): try: question = get_object_or_404(Question, pk=question_id) except KeyError: return render(request, 'polls/detail.html', {'error_message': "You didn't select a choice."})

Styling

The app uses Bootstrap for a clean, responsive interface:

html

<div class="container"> <h1>Poll Results</h1> <p>{{ question.question_text }}</p> </div>

Meta Data

Meta tags are used to improve SEO:

html

<meta name="description" content="Vote on the latest polls and view poll results.">

DEVELOPING A FINANCIAL DASHBOARD APPLICATION USING NEXT.JS

Abubakar Hassan — Mon, 16 Sep 2024 14:08:34 +0000

INTRODUCTION

Over the past two weeks, I worked on developing a financial dashboard application using Next.js.

TABLE OF CONTENTS

What to be Developed
Overview of Application
System Requirements
Getting Started

WHAT TO BE DEVELOPED

A financial dashboard home page.
A login page.
Financial dashboard layout.

OVERVIEW OF APPLICATION

In the development of the financial dashboard application, there are some features that are going to be implemented like:

Styling: The different ways to style your application in Next.js.
Optimizations: How to optimize images, links, and fonts.
Routing: How to create nested layouts and pages using file-system routing.
Data Fetching: How to set up a database on Vercel, and best practices for fetching and streaming.

SYSTEM REQUIREMENTS

This involves the system requirements:

Node.js 18.17.0 or later Download Node.js
Operating systems: macOS, Windows (including WSL), or Linux.
Visual Code editor.Download VisualStudio Code

GETTING STARTED

Creating The Financial Dashboard Application:

You need to install the pnpm as your package manager, and if you don't have pnpm install in your operating system, install by running this command on terminal:

npm install -g pnpm

Then to create a Next.js financial dashboard app, open your terminal, navigate to directory you want your app folder to be and then run the following command in the terminal:

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

Folder Structure:

You'll notice that the project has the following folder structure:

/app: Contains all the routes, components, and logic for your application, this is where you'll be mostly working from.
/app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions.
/app/ui: Contains all the UI components for your application, such as cards, tables, and forms.
/public: Contains all the static assets for your application, such as images.
Config Files: You'll also notice config files such as next.config.js at the root of your application. Most of these files are created and pre-configured when you start a new project using create-next-app.

Running The Development Server:

Run pnpm i on your terminal to install the project's packages.

pnpm i

Followed by pnpm dev to start the development server.

pnpm dev

pnpm dev starts your Next.js development server. Check to see if it's working.
Open http://localhost:3000 on your browser.

CREATING A FINANCIAL DASHBOARD HOME PAGE

The home page will created by adding the images and fonts. To add the images, use the next/image component to automatically optimize your images.

Adding The Desktop Hero Image;

In your /app/page.tsx file, import the component from next/image. Then, add the image by using the following statements below:

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';

export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      {/* Add Hero Images Here */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
    </div>
    //...
  );
}

Adding The Mobile Hero Image;

To add the Mobile Hero Image, in the same /app/page.tsx add the following statements below the Desktop Hero Image statements.

{/* Add Hero Images Here */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
      <Image
        src="/hero-mobile.png"
        width={560}
        height={620}
        className="block md:hidden"
        alt="Screenshot of the dashboard project showing mobile version"
      />

Now let's add some fonts to that home page. In your /app/ui folder, create a new file called fonts.ts. You'll use this file to keep the fonts that will be used throughout your application.

import { Inter } from 'next/font/google';

export const inter = Inter({ subsets: ['latin'] });

Finally, add the font to the

element in /app/layout.tsx:

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

So now the financial dashboard application home page will look like this below:

CREATING A LOGIN PAGE

Start by creating a new route called /login and paste the following code in your /app/login/page.tsx:

import AcmeLogo from '@/app/ui/acme-logo';
import LoginForm from '@/app/ui/login-form';

export default function LoginPage() {
  return (
    <main className="flex items-center justify-center md:h-screen">
      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
        <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
          <div className="w-32 text-white md:w-36">
            <AcmeLogo />
          </div>
        </div>
        <LoginForm />
      </div>
    </main>
  );
}

You'll notice the page imports . We will be using the NextAuth.js to add authentication to our application. NextAuth.js abstracts away much of the complexity involved in managing sessions, sign-in and sign-out, and other aspects of authentication.

Setting Up NextAuth.js;

Install NextAuth.js by running the following command in your terminal:

pnpm i next-auth@beta

Here, you're installing the beta version of NextAuth.js, which is compatible with Next.js 14.
Next, generate a secret key for your application. This key is used to encrypt cookies, ensuring the security of user sessions. You can do this by running the following command in your terminal:

openssl rand -base64 32

Then, in your .env file, add your generated key to the AUTH_SECRET variable:

AUTH_SECRET=your-secret-key

Adding The Page Options;

Create an auth.config.ts file at the root of our project that exports an authConfig object. This object will contain the configuration options for NextAuth.js. For now, it will only contain the pages option:

import type { NextAuthConfig } from 'next-auth';

export const authConfig = {
  pages: {
    signIn: '/login',
  },
} satisfies NextAuthConfig;

You can use the pages option to specify the route for custom sign-in, sign-out, and error pages. This is not required, but by adding signIn: '/login' into our pages option, the user will be redirected to our custom login page, rather than the NextAuth.js default page.

Protecting Your Routes With Next.js Middleware;

Next, add the logic to protect your routes. This will prevent users from accessing the dashboard pages unless they are logged in.

import type { NextAuthConfig } from 'next-auth';

export const authConfig = {
  pages: {
    signIn: '/login',
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false; // Redirect unauthenticated users to login page
      } else if (isLoggedIn) {
        return Response.redirect(new URL('/dashboard', nextUrl));
      }
      return true;
    },
  },
  providers: [], // Add providers with an empty array for now
} satisfies NextAuthConfig;

The authorized callback is used to verify if the request is authorized to access a page via Next.js Middleware. It is called before a request is completed, and it receives an object with the auth and request properties. The auth property contains the user's session, and the request property contains the incoming request.
Next, you will need to import the authConfig object into a Middleware file. In the root of your project, create a file called middleware.ts and paste the following code:

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

export default NextAuth(authConfig).auth;

export const config = {
  // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};

Here you're initializing NextAuth.js with the authConfig object and exporting the auth property. You're also using the matcher option from Middleware to specify that it should run on specific paths. Then create a new file called auth.ts that spreads your authConfig object:

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
});

Adding The Credentials Providers;

Next, you will need to add the providers option for NextAuth.js. providers is an array where you list different login options such as Google or GitHub. The Credentials provider allows users to log in with a username and a password. In your /auth.ts add the following code:

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [Credentials({})],
});

Adding The Sign In Functionality;

You can use the authorize function to handle the authentication logic. Similarly to Server Actions, you can use zod to validate the email and password before checking if the user exists in the database:

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
import { z } from 'zod';

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);
      },
    }),
  ],
});

After validating the credentials, create a new getUser function that queries the user from the database.

import { sql } from '@vercel/postgres';
import type { User } from '@/app/lib/definitions';
import bcrypt from 'bcrypt';

async function getUser(email: string): Promise<User | undefined> {
  try {
    const user = await sql<User>`SELECT * FROM users WHERE email=${email}`;
    return user.rows[0];
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw new Error('Failed to fetch user.');
  }
}

if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email);
          if (!user) return null;

Updating The Login Form;

Now you need to connect the auth logic with your login form. In your /actions.ts file, create a new action called authenticate. This action should import the signIn function from /auth.ts:

'use server';

import { signIn } from '@/auth';
import { AuthError } from 'next-auth';

// ...

export async function authenticate(
  prevState: string | undefined,
  formData: FormData,
) {
  try {
    await signIn('credentials', formData);
  } catch (error) {
    if (error instanceof AuthError) {
      switch (error.type) {
        case 'CredentialsSignin':
          return 'Invalid credentials.';
        default:
          return 'Something went wrong.';
      }
    }
    throw error;
  }
}

Finally, in your login-form.tsx component, you can use React's useActionState to call the server action, handle form errors, and display the form's pending state:

import { useActionState } from 'react';
import { authenticate } from '@/app/lib/actions';

const [errorMessage, formAction, isPending] = useActionState(
    authenticate,
    undefined,
  );

<form action={formAction} className="space-y-3">

<Button className="mt-4 w-full" aria-disabled={isPending}>
          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
        </Button>

{errorMessage && (
            <>
              <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
              <p className="text-sm text-red-500">{errorMessage}</p>
            </>
          )}

Adding Logout Functionality;

To add the logout functionality to , call the signOut function from auth.ts in your

element:

import { signOut } from '@/auth';

action={async () => {
            'use server';
            await signOut();
          }}

Now, try it out. You should be able to log in and out of your application. The login page should look like this:

CREATING DASHBOARD LAYOUT

Dashboards have some sort of navigation that is shared across multiple pages. In Next.js, you can use a special /layout.tsx file to create UI that is shared between multiple pages. inside the /dashboard folder, add a new file called /layout.tsx and paste the following code:

import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

You'll see the dashboard layout like this below:

Also set up pages for the /customers and /invoices.
Customers Page: /app/dashboard/customers/page.tsx

export default function Page() {
  return <p>Customers Page</p>;
}

Invoices Page: /app/dashboard/invoices/page.tsx

export default function Page() {
  return <p>Invoices Page</p>;
}

Navigation Between Pages:

In Next.js, you can use the Component to link between pages in your application. allows you to do client-side navigation with JavaScript. To use the component, open /app/ui/dashboard/nav-links.tsx, and import the Link component from next/link. Then, replace the tag with :

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
**import Link from 'next/link';**

// ...

export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

CREATING THE DATABASE

Create A Github Repository;

To start, let's push your repository to Github if you haven't done so already. This will make it easier to set up your database and deploy. If you need help setting up your repository, take a look at this guide on Github.

Create A Vercel Account;

Visit Vercel.com to create an account. Choose the free "hobby" plan. Select Continue with GitHub to connect your GitHub and Vercel accounts.

Connect And Deploy Your Project;

You'll be taken to this screen where you can select and import the GitHub repository you've just created:

Name your project and click Deploy.

Create A Postgres Database;

To set up a database, click Continue to Dashboard and select the Storage tab from your project dashboard. Select Connect Store → Create New → Postgres → Continue.

NEXT JS

jieva163 — Mon, 16 Sep 2024 13:53:15 +0000

The following are some of the charpters i learned,and did;
optimizing Fonts and Images;
Creating Layouts and Pages;
. Set Up Node.js
install node.js in your computer,next js requirs node.js version.
b. Create a New Next.js
create a new Next.js project quickly. Open your terminal or command prompt and run the following command
Navigating Between Pages;
Setting Up Your Database in vercel;
Executing queries;;
npx is a package runner tool that comes with Node.js.
create-next-app is a tool that sets up a new Next.js project with a default configuration.
my-nextjs-project is the name of the folder where your project will be created.
.API lAYER
APIs are an intermediary layer between your application code and database. There are a few cases where you might use an API:
• If you're using 3rd party services that provide an API.
• If you're fetching data from the client, you want to have an API layer that runs on the server to avoid exposing your database secrets to the client.
In Next.js, you can create API endpoints using Route Handlers.
Database queries
When you're creating a full-stack application, you'll also need to write logic to interact with your database. For relational databases
like Postgres, you can do this with SQL or with an ORM
.SETTING UP DATABASE IN VERCEL.
There are a few cases where you have to write database queries:
•
When creating your API endpoints, you need to write logic to interact with your database.

If you are using React Server Components (fetching data on the server), you can skip the API layer, and query your database directly without risking exposing your database secrets to the client.
when creating a postgres data base u should first create new postgres, Once connected, navigate to the .env.local tab, click Show secret and Copy Snippet. Make sure you reveal the secrets before copying them.the following is the secret after coppying the snippet;

`POSTGRES_URL="postgres://default:FWuODZz9B5Td@ep-withered-recipe-a48czbnm-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_PRISMA_URL="postgres://default:FWuODZz9B5Td@ep-withered-recipe-a48czbnm-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NO_SSL="postgres://default:FWuODZz9B5Td@ep-withered-recipe-a48czbnm-pooler.us-east-1.aws.neon.tech:5432/verceldb"
POSTGRES_URL_NON_POOLING="postgres://default:FWuODZz9B5Td@ep-withered-recipe-a48czbnm.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_USER="default"
POSTGRES_HOST="ep-withered-recipe-a48czbnm-pooler.us-east-1.aws.neon.tech"
POSTGRES_PASSWORD="FWuODZz9B5Td"
POSTGRES_DATABASE="verceldb"`

HOW TO FETCH DATA
Using Server Components to fetch data
By default, Next.js applications use React Server Components. Fetching data with Server Components is a relatively new approach and there are a few benefits of using them:

Server Components support promises, providing a simpler solution for asynchronous tasks like data fetching. You can use async/await syntax without reaching out for useEffect, useState or data fetching libraries.
Server Components execute on the server, so you can keep expensive data fetches and logic on the server and only send the result to the client.

Server Components execute on the server, you can query the database directly without an additional API layer. In the case of data fetching, each request can only begin once the previous request has returned data.
Static and Dynamic Rendering

Streaming is a data transfer technique that allows you to break down a route into smaller "chunks" and progressively stream them from the server to the client as they become ready.

By streaming, you can prevent slow data requests from blocking your whole page. This allows the user to see and interact with parts of the page without waiting for all the data to load before any UI can be shown to the user

A COMPREHENSIVE GUIDE OF NEXTJS

aheed192 — Mon, 16 Sep 2024 13:52:19 +0000

Introduction

Next.js is a React framework that offers an optimized development experience for building modern web applications. It provides features like server-side rendering (SSR), static site generation (SSG), API routes, and more, allowing developers to build performant and scalable application.

TECH STACK USED WHEN DOING IT
Fronted: next
Backend: NodeJS
Database: Postgres
Deployment: Vercel (Vercel linked with GitHub)

CREATING A NEW PROJECT
i recommend using pnpm as your package manager, as it's faster and more efficient than npm or yarn. If you don't have pnpm installed, you can install it globally by running:

`npm install -g pnpm`

To create a Next.js app, open your terminal, cd into the folder you'd like to keep your project, and run the following command

`npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm`

After installation, open the project in your code editor and navigate to nextjs-dashboard.

`cd nextjs-dashboard`

KEY FEATURES OF NEXTJS

THE LOGIN PAGE
This section will guide you through building a login page in Next.js with a basic form for user input and client-side state management. This example assumes you are handling authentication via API routes and a backend service.to add authenticate to access the next page we use NextAuth. We install the NextAuth.js by running the following commands in your terminal;

`pnpm i next-auth@beta`

Next, generate a secret code for your application, you can do this by running the following commands in your terminal;

`openssl rand -base64 32`

Then in your .env file, add your generated key to the AUTH_SECRET VARIABLE:

`AUTH_SECRET=your-secret-key`

THE DASHBOARD
In this section, we'll build a basic dashboard in Next.js. This dashboard will include a protected route that ensures only authenticated users can access it. For simplicity, this example assumes that user authentication is handled with session-based authentication using API routes.

PAGES FOUND IN THE DASHBOARD

1. HOME PAGE
A home page serves as the landing page of your application, offering users an overview of the content or services you provide. In this guide, we'll create a simple yet effective home page using Next.js. This page will include a navigation bar, a hero section, and some content sections to give users a glimpse of what the site offers.

2. THE INVOICE PAGE
An invoice page typically displays a list of items or services along with quantities, prices, and totals. In this guide, we will create a simple invoice page in Next.js, which includes an invoice list and summary. This example assumes static data for simplicity, but you can easily adapt it to fetch data from an API.

3. THE CUSTOMER PAGE
A customer page typically displays a list of customers along with relevant details like name, email, and contact information. This guide will walk you through creating a customer page in Next.js that fetches and displays customer data, and optionally allows actions like adding or deleting customers.

WHAT I LEARNED

Learnt on how to create a Postgres database by creating new postgres then nevigated to the .env.local tab to show the secret and copied the snippet which is as follows;

POSTGRES_URL="postgres://default:yrq8tQa2bUDn@ep-rough-silence-a42bmnk3-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_PRISMA_URL="postgres://default:yrq8tQa2bUDn@ep-rough-silence-a42bmnk3-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NO_SSL="postgres://default:yrq8tQa2bUDn@ep-rough-silence-a42bmnk3-pooler.us-east-1.aws.neon.tech:5432/verceldb"
POSTGRES_URL_NON_POOLING="postgres://default:yrq8tQa2bUDn@ep-rough-silence-a42bmnk3.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_USER="default"
POSTGRES_HOST="ep-rough-silence-a42bmnk3-pooler.us-east-1.aws.neon.tech"
POSTGRES_PASSWORD="yrq8tQa2bUDn"
POSTGRES_DATABASE="verceldb"

Technical Article:For Django And NextJS.

Denis Ogutu — Mon, 16 Sep 2024 13:51:32 +0000

Overview

A web application built with Django and a dashboard using Next.js have seen substantial development over the last two weeks. This document offers a thorough rundown of the environment configuration, development tasks, and significant connections with different project components.

Environment Setup for Django Project

Setup Python:

The aim is to guarantee that Python is accessible for Django programming.
Procedure: I downloaded Python's most recent version from the official website.
PIP and Python may be accessed from the command line thanks to environment variable configuration.Setting up Django:

Goal: Set up the web development framework Django.
The process involved using pip to install Django.
Confirming the installation was successful, I looked up the Django version.
Checking the versions of Python and pip installed allowed for verification.
Establishment and Configuration of Projects

Project Start-Up:

Goal: Start a brand-new Django project.
Procedure: Using the Django command-line tool, create a new project called my_site.
Result: The project structure was generated, together with necessary files like manage.py, urls.py, and settings.py.

Making of an Application:

Goal: Expand the Django project by adding a new application.
Procedure: Developed a polls application inside the my_site project.
Result: The relevant files, models.py, views.py, forms.py, and urls.py, were added to the polls application directory.

Activities for Development

Opinions

Goal: Create views to manage queries and answers over the HTTP protocol.

Details: Views that connect with the database, process user input, and render templates have been implemented.

Forms

Control and verify user input is the goal.
Details: Made forms that leverage Django's form handling features to manage user input and validation.

URLs

Setting up URL routing for the application is the goal.
Details: Map URLs to certain view functionalities by configuring URL patterns.

Configuration of Settings:

Goal: Consolidate the new application inside the Django framework.
Details: Added the polls app to the INSTALLED_APPS list by updating the settings.py file.

Models:

Goal: specify the structure of the database.
Details: Fields and associations were defined, and models were created to reflect the database structure.

Database Communication:

Applying schema modifications to the database is the goal.
Procedure: Created database tables based on the models and ran migrations using Django's ORM.
Details: Commands to generate and apply migrations were executed, and the database schema was updated.

Setup of the Next.js Project Environment

Installing npm with Node.js:

Goal: Ascertain that npm and Node.js are accessible for developing Next.js.

Method: npm was installed together with Node.js from the official website.
Verification: I checked the versions of Node.js and npm to confirm that they were installed.

Installing pnpm:

Goal: Make effective use of pnpm for package management.
Procedure: Used npm to install pnpm globally.

Establishing and Setting Up Projects

Initialization of the Next.js Application:

Goal: Launch a fresh Next.js application.
Procedure: Using the create-next-app command, the my-nextjs-dashboard project was initially created.
Result: A brand-new Next.js project was built, complete with public assets, styles, configuration files, and folders for pages.

Vercel Implementation:

Goal: Install the Next.js program on Vercel.
Procedure: Continuous deployment and online access were made possible by using the Vercel CLI to deploy the application.

Developmental Tasks

Learning Platform for Next.js:

First of all,

Goal: Become acquainted with Next.js via methodical education.
Activities: Finished the Next.js Learning Platform lessons on data fetching, routing, and API integration.

Adaptive Routing:

Goal: Integrate dynamic routing into the program.
Details: Configure dynamic routes to accommodate various post IDs and provide content that matches them.

Fetching Data:

Goal: Retrieve and show data from APIs.
Details: To increase efficiency, static data fetching was implemented at build time.

API Consolidation:

Goal: Develop and incorporate APIs into the Next.js program.
Specifics: Created a JSON response-returning API endpoint.

Optimizing Performance:

Improving application performance is the goal.
Details: To increase load times and responsiveness, technologies including image optimization, code splitting, and caching were used.

Testing

Goal: Verify the application's dependability.
Tools: For unit testing, Jest was used.
Details: Tests were created and run to ensure that functionality and component rendering were accurate.

In summary

Both the Next.js and Django projects have made significant development in the last two weeks. Creating and establishing a project and application, as well as generating essential components like views, forms, URLs, and models, were all part of the Django project. The Next.js project concentrated on configuring the environment, starting the program, deploying it to Vercel, and putting capabilities like data fetching, dynamic routing, API integration, and performance optimization into practice. The underlying components of both projects have been developed, and the key features have been tested and put into practice.

Article banner image
code snippets
Python macdown

example

liz nzisa — Mon, 16 Sep 2024 13:50:07 +0000

Building a Simple Polling App in Django: Step-by-Step Guide

Maskini Mnene — Mon, 16 Sep 2024 13:48:53 +0000

We will go through setting up a Django project from scratch to create a simple polling application. This guide will cover everything from installing Python and Django to configuring your app with models, views, and templates. Along the way, we will build a feature that lets users vote in a poll, and we will explore key concepts like generic views, models, and URL routing.

Step 1: Installing Python and Setting Up a Virtual Environment

Before you start with Django, make sure you have Python installed on your machine. If you don’t have it installed, you can download Python from python.org.

To keep your project’s dependencies isolated, it’s best to use a virtual environment.

# Install virtualenv if you don't have it
pip install virtualenv

# Create a virtual environment
virtualenv venv

# Activate the virtual environment
venv\Scripts\activate

Step 2: Installing Django and Starting a Project

With your virtual environment activated, install Django:

pip install django

Now, create a new Django project called mysite:

django-admin startproject mysite

This command creates a mysite directory that contains your project files.

Step 3: Creating the Polls App

Django follows a modular approach, and every feature in Django is usually built inside an "app". We will create an app called polls.

cd mysite
python manage.py startapp polls

Next, register the polls app in mysite/settings.py by adding it to the INSTALLED_APPS list:

INSTALLED_APPS = [
    # other apps...
    'polls',
]

Step 4: Defining Models for Questions and Choices

In polls/models.py, we will define two models: Question and Choice. Each Question will have several Choices that users can vote on.

from django.db import models
from django.utils import timezone
import datetime

class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')

    def __str__(self):
        return self.question_text

    def was_published_recently(self):
        now = timezone.now()
        return now - datetime.timedelta(days=1) <= self.pub_date <= now

class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

    def __str__(self):
        return self.choice_text

Step 5: Creating and Migrating the Database

We will be using SQLite for our database, which is the default for Django. The configuration can be found in mysite/settings.py under the DATABASES section:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

After setting up the models, you need to generate the migrations and apply them to create the database schema:

python manage.py makemigrations
python manage.py migrate

Step 6: Creating Views for Polls

We will use Django’s generic views to simplify the process of creating list and detail views. In polls/views.py, define views for listing questions, showing details of a question, and displaying results.

from django.shortcuts import get_object_or_404, render
from django.http import HttpResponseRedirect
from django.urls import reverse
from django.db.models import F
from django.views import generic
from django.utils import timezone
from .models import Question, Choice

class IndexView(generic.ListView):
    template_name = 'polls/index.html'
    context_object_name = 'latest_question_list'

    def get_queryset(self):
        return Question.objects.filter(pub_date__lte=timezone.now()).order_by('-pub_date')[:5]

class DetailView(generic.DetailView):
    model = Question
    template_name = 'polls/detail.html'

    def get_queryset(self):
        return Question.objects.filter(pub_date__lte=timezone.now())

class ResultsView(generic.DetailView):
    model = Question
    template_name = 'polls/results.html'

def vote(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    try:
        selected_choice = question.choice_set.get(pk=request.POST['choice'])
    except (KeyError, Choice.DoesNotExist):
        return render(request, 'polls/detail.html', {
            'question': question,
            'error_message': "You didn't select a choice.",
        })
    else:
        selected_choice.votes = F('votes') + 1
        selected_choice.save()
        return HttpResponseRedirect(reverse('polls:results', args=(question.id,)))

Step 7: Mapping URLs to Views

In polls/urls.py, define the URL patterns for our app, which will map the URL paths to the views we just created.

from django.urls import path
from . import views

app_name = 'polls'
urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('<int:pk>/', views.DetailView.as_view(), name='detail'),
    path('<int:pk>/results/', views.ResultsView.as_view(), name='results'),
    path('<int:question_id>/vote/', views.vote, name='vote'),
]

Then, include the polls/urls.py in the main mysite/urls.py:

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]

Step 8: Creating Templates

In polls/templates/polls/, create the HTML templates. First, index.html will display the list of questions:

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li> 
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

Next, the detail.html template will display the voting form for a question:

<h1>{{ question.question_text }}</h1>
<form action="{% url 'polls:vote' question.id %}" method="post">
    {% csrf_token %}
    {% for choice in question.choice_set.all %}
        <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
        <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
    {% endfor %}
    <input type="submit" value="Vote">
</form>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

Lastly, results.html will display the voting results:

<h1>{{ question.question_text }}</h1>

<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
{% endfor %}
</ul>

<a href="{% url 'polls:detail' question.id %}">Vote again?</a>

Step 9: Running the Development Server

Now that everything is set up, you can start the Django development server:

python manage.py runserver