DEV Community: Renuka Nandikolla

🧩 Next.js Application with TypeScript, Bootstrap, Supabase

Renuka Nandikolla — Fri, 20 Jun 2025 11:05:33 +0000

A full-stack web application Project built with Next.js, TypeScript, Bootstrap, and Supabase, featuring secure user authentication, form validation, image uploads, and product management.

🚀 Features

User Authentication: Email/password registration and login
Social Login: Google & GitHub authentication
Protected Routes: Access control for dashboard and profile pages
Form Validation: Client-side validation using yup and react-hook-form
Product Management: Create, read, update, and delete products
Image Uploads: Upload and display product images using Supabase Storage
Notifications: Toast messages via react-hot-toast for user feedback
Email Confirmation: Users verify email before login
Edit/Delete Profile and Products: Update profile and delete products permanently

🛠️ Prerequisites

Node.js
npm or Yarn
VS Code or preferred code editor

⚙️ Getting Started

1. Initialize Project

npx create-next-app@latest

Use these settings during setup:

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
App Router: Yes
Turbopack: No
src/ directory: No
Import alias: No

2. Install Dependencies

npm install bootstrap react-hot-toast sweetalert2 yup react-hook-form @hookform/resolvers @supabase/supabase-js

Bootstrap: UI styling
React Hot Toast: Toast notifications
SweetAlert2: Stylish alert modals
Yup: Schema validation
React Hook Form: Form handling
@hookform/resolvers: Integrates Yup with React Hook Form
@supabase/supabase-js: Supabase client for authentication and database

🔧 Supabase Configuration

1. Register and Create a Supabase Project

Visit Supabase and register for an account.
Click on "New Project" to create a new Supabase project.
After creation, go to Project Settings → API and copy your Project URL and Anon Key.

💡 Note: Store your credentials securely. Avoid hardcoding them in your frontend for production.

2. Email Authentication Settings

In Supabase dashboard, go to Authentication → Settings.
Under Email Sign up:
- Optionally disable "Confirm new signups" and "Secure password" for development.
Click Save.

⚠️ For production, always enable secure options to protect user data.

🌱 Environment Variables Setup

1. Create a `.env.local` File

In your project root, create .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

🗂️ Project Folder Structure

app/auth/: Authentication-related pages
components/: Shared UI components
context/: React Context providers for global state
lib/: Utility files, including Supabase client initialization

🔌 Supabase Client Setup

Create lib/supabaseClient.ts:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

🔑 Authentication

Authentication Routes

Login Page (app/auth/login/page.tsx): Implement login form. On success, store session token in sessionStorage and redirect to dashboard.
Register Page (app/auth/register/page.tsx): Registration form with validation.
Profile Page (app/auth/profile/page.tsx): Display and update user details.
Dashboard Page (app/auth/dashboard/page.tsx): Protected route; redirect to /auth/login if not logged in.
Social Authentication: Google & GitHub.

Enable Social Authentication in Supabase

Go to Authentication → Providers in Supabase.
Enable Google and GitHub.
Set up OAuth credentials:
- Google Developer Console
- GitHub Developer Settings

Logout Functionality

Implement an onClick handler for logout in Navbar.tsx to clear session/local storage and redirect to login.

🖼️ UI Components

Layout Setup (`app/layout.tsx`)

Remove unnecessary code.
Update <title>.

Import Bootstrap CSS:

  import 'bootstrap/dist/css/bootstrap.min.css';

Import and add Toaster:

  import { Toaster } from 'react-hot-toast';

Wrap children with AppUtils context:

Shared Components (`components/`)

Navbar.tsx: Navigation bar with conditional links based on auth state.
Footer.tsx: Simple footer.
Loader.tsx: Loader for loading states.

🧩 Context and Hooks

context/AppUtils.tsx: Manages global states like isLoggedIn and AuthToken. Use useEffect to handle session logic and redirections with useRouter.

✅ Form Validation

Register Page: Use react-hook-form, yup, and @hookform/resolvers/yup for schema validation.
Dashboard Page: Define validation schema for product fields.

📦 Dashboard & Data Management

Supabase Table: Create a products table in Supabase Table Editor.
Display Products: In app/dashboard/page.tsx, use useState for products, render list, and add "Edit" and "Delete" buttons.

C:\Users\RENUKA\Pictures\Screenshots\Screenshot (242).png

🖼️ Image Uploads

Supabase Storage: Create a bucket (e.g., product-images).
Image Upload Implementation: In dashboard, use useState for preview image, handle file input, upload to Supabase Storage, and update product with image URL.

▶️ Running the Application

npm run dev

Visit http://localhost:3000.

🛠️ Troubleshooting

Environment Variables: Ensure .env.local is correct and uses NEXT_PUBLIC_ prefix.
Supabase API Keys: Double-check URL and Anon Key.
CORS Issues: Check Supabase project settings.
Authentication Flow: Verify session tokens in storage.
Redirections: Check useRouter paths.
Toast Messages: Ensure Toaster is imported and used.
Image Uploads: Check Supabase Storage rules and tsconfig.json paths.

✨ Additional Features

Email Confirmation: After registration, users receive a confirmation email and must verify before login. On confirmation, redirect to login with a toast notification.
Edit & Delete User Details: Users can update profile details and permanently delete products.

🚀 Deployment

Deploy your Next.js application to Vercel.

My Project Vercel Link - https://next-supabase-app-rq9n.vercel.app/

🔗 Live Demo:

Check out the project showcased on LinkedIn.

📂 Project Code on GitHub:

https://github.com/Renuma1618/Next-Supabase-App

The Main and Tricky Concepts in JavaScript

Renuka Nandikolla — Sat, 01 Mar 2025 16:15:03 +0000

1.scopes

2.Hoisting

3.Functions

4.Arrow Functions

5.Promises

6.Fetching API

7.Async/Await

1. Scopes 🌎

Scope determines the accessibility of variables in JavaScript.

Types of Scope

Global Scope 🌍: Variables declared outside any function are accessible everywhere.
Local Scope 🔒: Variables declared inside a function are only accessible within that function.
Block Scope 🧱: Introduced with let and const, variables declared inside {} cannot be accessed outside.
Function Scope 🎯: Variables declared using var inside a function are only accessible within that function.

2. Hoisting 🚀

Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope before execution.

Example

console.log(a); // undefined (not error)
var a = 10;

foo(); // ✅ Works! Function declarations are hoisted
function foo() {
    console.log("Function Hoisted!");
}

// Function Expressions are **not** hoisted
bar(); // ❌ Error: bar is not a function
var bar = function () {
    console.log("Function Expression");
};

Note: Only function declarations are fully hoisted, but variables declared with var are hoisted with undefined value.

3. Functions 🎭

Function Declaration vs Function Expression

Feature	Function Declaration	Function Expression
Hoisted?	✅ Yes	❌ No
Can be called before declaration?	✅ Yes	❌ No
Syntax	`function func() {}`	`const func = function() {}`

Example

// Function Declaration
function greet() {
    return "Hello!";
}
console.log(greet()); // ✅ Works!

// Function Expression
const greetExpression = function() {
    return "Hello from expression!";
};
console.log(greetExpression()); // ✅ Works only after definition

4. Arrow Functions ➡️

Arrow functions provide a more concise syntax for writing functions.

Syntax

const functionName = (parameters) => expression;

Example

// Traditional Function
function add(a, b) {
    return a + b;
}

// Arrow Function Equivalent
const addArrow = (a, b) => a + b;

console.log(addArrow(3, 4)); // Output: 7

Key Differences

this is lexically bound (inherits from the surrounding scope).
Cannot be used as constructors (new keyword).
No arguments object available.

5. Promises 🤝

A Promise is an object that represents the eventual completion or failure of an asynchronous operation.

States of a Promise

Pending 🟡 - Initial state, before the result is available.
Fulfilled ✅ - The operation was successful.
Rejected ❌ - The operation failed.

Why use Promises?

✔️ Handle asynchronous operations efficiently.

✔️ Avoid callback hell.

Example

const myPromise = new Promise((resolve, reject) => {
    let success = true;
    setTimeout(() => {
        if (success) resolve("Promise resolved! ✅");
        else reject("Promise rejected! ❌");
    }, 2000);
});

myPromise
    .then(response => console.log(response))  // Runs if resolved
    .catch(error => console.log(error));      // Runs if rejected

6. Fetching Data from an API 🌍

Fetch is used to request data from a server.

Example

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json()) // Convert response to JSON
    .then(data => console.log(data))   // Log data
    .catch(error => console.log("Error:", error));

It returns a Promise, which we handle using .then() and .catch().

7. Async/Await ⏳

async/await makes handling asynchronous code cleaner and more readable.

Example

async function fetchData() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log("Error:", error);
    }
}

fetchData();

Why use `async/await`?

✔️ Avoids callback hell

✔️ Improves readability

✔️ Easier error handling using try...catch

🚀 Summary

Scope: Determines where variables are accessible.
Hoisting: Moves function declarations and var variables to the top before execution.
Function Declarations vs Expressions: Declarations are hoisted, expressions are not.
Arrow Functions: Shorter syntax, no this binding.
Promises: Handle async operations with .then() and .catch().
Fetch API: Used for making network requests.
Async/Await: Syntactic sugar over Promises for cleaner async code.

🔹 Master these concepts, and you're on your way to becoming a JavaScript pro! 🚀

JavaScript vs TypeScript:

Renuka Nandikolla — Mon, 24 Feb 2025 16:54:57 +0000

✨ Introduction

JavaScript is a dynamic, loosely typed language widely used for web development. TypeScript, on the other hand, is a strongly typed superset of JavaScript that provides static typing and other powerful features.

" 🎯 TypeScript is JavaScript with syntax for types." – Microsoft

key differences

Feature 🟡JavaScript 🔵Typescript

📌Type System Dynamically typed Statically typed

⚡Compilation Runs directly in browsers Needs to be compiled to JavaScript

🐞Error Detection Detected at runtime Detected at compile-time

🛠Tooling & Debugging Limited static analysis Better IntelliSense & error detection

🎓Learning Curve Easier for beginners Requires learning types & compilation

📈Code Scalability Less maintainable for large projects Better for large-scale applications

Feature	🟡JavaScript	🔵Typescript
📌Type System	Dynamically typed	Statically typed
⚡Compilation	Runs directly in browsers	Needs to be compiled to JavaScript
🐞Error Detection	Detected at runtime	Detected at compile-time
🛠Tooling & Debugging	Limited static analysis	Better IntelliSense & error detection
🎓Learning Curve	Easier for beginners	Requires learning types & compilation
📈Code Scalability	Less maintainable for large projects	Better for large-scale applications

🚀Why Choose TypeScript Over JavaScript?

Improved Code Quality
- Detects errors before execution
- Reduces debugging time
- Better Developer Experience
Offers IntelliSense for better code suggestions
- Provides better code documentation with types
- Enhanced Maintainability
Code is more structured and readable
- Helps in large-scale applications with multiple developers
- Static Typing Benefits

Extensions to Save

📝JavaScript Example

 var name = "Renuka"; // Can store any value
console.log(name);  // Output: Renuka

name = 25; // No error, but may cause issues later
console.log(name);  // Output: 25

TypeScript Example

var name: string = "Renuka"; // Explicitly defined as a string
console.log(name); // Output: Renuka

// name = 25; // ❌ Error: Type 'number' is not assignable to type 'string'

JavaScript or TypeScript🤔?

✅ Use JavaScript if you're working on small projects or quick prototypes.
✅ Use TypeScript for large applications, enterprise projects, or when working in teams.

🔗Click and Understand JavaScript and TypeScript better

🙋‍♀️About Me

👩‍💻Computer Science graduate and Frontend Developer with a strong foundation in full-stack development, Frontend development and agile methodologies. Passionate about building innovative and reliable products that empower users. Experienced in modern, responsive interfaces using React.js.
Lets Connect👉 Linkdin & Email

DEV Community: Renuka Nandikolla

🧩 Next.js Application with TypeScript, Bootstrap, Supabase

A full-stack web application Project built with Next.js, TypeScript, Bootstrap, and Supabase, featuring secure user authentication, form validation, image uploads, and product management.

🚀 Features

🛠️ Prerequisites

⚙️ Getting Started

1. Initialize Project

2. Install Dependencies

🔧 Supabase Configuration

1. Register and Create a Supabase Project

2. Email Authentication Settings

🌱 Environment Variables Setup

1. Create a .env.local File

🗂️ Project Folder Structure

🔌 Supabase Client Setup

🔑 Authentication

Authentication Routes

Enable Social Authentication in Supabase

Logout Functionality

🖼️ UI Components

Layout Setup (app/layout.tsx)

Shared Components (components/)

🧩 Context and Hooks

✅ Form Validation

📦 Dashboard & Data Management

🖼️ Image Uploads

▶️ Running the Application

🛠️ Troubleshooting

✨ Additional Features

🚀 Deployment

My Project Vercel Link - https://next-supabase-app-rq9n.vercel.app/

The Main and Tricky Concepts in JavaScript

1.scopes

2.Hoisting

3.Functions

4.Arrow Functions

5.Promises

6.Fetching API

7.Async/Await

1. Scopes 🌎

Types of Scope

2. Hoisting 🚀

Example

3. Functions 🎭

Function Declaration vs Function Expression

Example

4. Arrow Functions ➡️

Syntax

Example

Key Differences

5. Promises 🤝

States of a Promise

Why use Promises?

Example

6. Fetching Data from an API 🌍

Example

7. Async/Await ⏳

Example

Why use async/await?

🚀 Summary

JavaScript vs TypeScript:

✨ Introduction

key differences

🚀Why Choose TypeScript Over JavaScript?

Extensions to Save

📝JavaScript Example

TypeScript Example

JavaScript or TypeScript🤔?

🙋‍♀️About Me

1. Create a `.env.local` File

Layout Setup (`app/layout.tsx`)

Shared Components (`components/`)

Why use `async/await`?