DEV Community: Safak

Build Your Own Full Stack ChatGPT with React

Safak — Thu, 25 Jul 2024 11:18:29 +0000

Hi, I'm a full-stack web developer passionate about sharing my web development journey with other devs. I recently created a full-stack ChatGPT application that uses Gemini (I picked that over OpenAI because it's free). Check out my GitHub repository for the open-source code: Here

I’ve also published the tutorial of the project on my YouTube channel: You can check it out

What technologies are used?

Backend:

Express.js

Database:

MongoDB

Auth:

Clerk

Frontend:

React 19
React Router Dom
React Query

AI:

Google Gemini

Image Uploading:

ImageKit

The design consists of two layouts, five pages, and three components.

src
- layouts
  - RootLayout.jsx
  - DashboardLayout.jsx
- routes
  - Homepage.jsx
  - DashboardPage.jsx
  - ChatPage.jsx
  - SignInPage.jsx
  - SignOutPage.jsx
- components
  - ChatList.jsx
  - NewPrompt.jsx
  - Upload.jsx
- lib
  - gemini.js

Setting Up Google Gemini

To integrate Google Gemini AI, we use the @google/generative-ai library. Here is how to set it up in gemini.js:

import { GoogleGenerativeAI } from "@google/generative-ai";
import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
  {
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
];

const genAI = new GoogleGenerativeAI(import.meta.env.VITE_GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", safetySettings });

export default model;

Setting Up MongoDB Models

Using Mongoose.js, we create schemas for our chats and user chats. This will allow us to verify upcoming CRUD inputs. Here are the schemas:

Chat Schema

const chatSchema = new mongoose.Schema({
  userId: {
    type: String,
    required: true,
  },
  history: [
    {
      role: {
        type: String,
        enum: ['user', 'model'],
        required: true,
      },
      parts: [
        {
          text: {
            type: String,
            required: true,
          },
        },
      ],
      img: {
        type: String,
        required: false,
      },
    },
  ],
}, {
  timestamps: true,
});

The history array is required to send previous data to the AI. This ensures that when we visit the chat page and ask a new question, we receive relevant answers. Additionally, using the userId, we can verify the owner of the chat.

UserChats Schema

const userChatsSchema = new mongoose.Schema({
  userId: {
    type: String,
    required: true,
  },
  chats: [
    {
      _id: {
        type: String,
        required: true,
      },
      title: {
        type: String,
        required: true,
      },
      createdAt: {
        type: Date,
        default: Date.now,
      },
    },
  ],
}, {
  timestamps: true,
});

Each user has a chats array that includes the title and ID of their chats. We’ll use the title to display items in the left menu, and when a user clicks on any of these titles, we’ll open the chat page using the corresponding ID.

Creating an AI Chat

After creating the endpoint in the Express app and fetching data in the client, you’ll be able to pass the previous history to the AI.

  const chat = model.startChat({
    history: chatHistory,
    generationConfig: {
      maxOutputTokens: 100, // You can limit your tokens
    },
  });

After displaying the chat, you are ready to have a conversation with the AI. Take the text from a form and send it to AI.

  const add = async (text) => {
    setQuestion(text);

    let accumulatedText = "";

    try {
      const result = await chat.sendMessageStream(
        Object.entries(img.aiData).length ? [img?.aiData, text] : [text]
      );

      for await (const chunk of result.stream) {
        const chunkText = chunk.text();
        accumulatedText += chunkText;
        setAnswer(accumulatedText);
      }
      mutation.mutate();
    } catch (err) {
      console.log(err);
    }
  };

This is how to create a chat streaming with Gemini AI. To see how to save them to a database, you can check the source code or the video tutorial

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check out my channel and other posts 😊

Lama Dev

🔥 Lama Dev YouTube Channel
❌ Lama Dev X/Twitter
⚡️ Lama Dev Instagram
👾 Source Code

Next.js Full Stack Food Delivery App (5+ Hours Free Tutorial)

Safak — Wed, 09 Aug 2023 12:37:50 +0000

Hey, fellow developers!

I'm a full-stack web developer with a passion for sharing my web development journey with other devs. Recently, I’ve created a full stack Restaurant application where users can order food. Feel free to check it out on my GitHub page.

Moreover, I’ve published the tutorial of the project on my Youtube channel. You can reach the playlist here

Whether you're a seasoned developer or a curious learner, this tutorial series has something for everyone.

What technologies are used?

Backend:

Next.js App Router (API)

Database:

PostgreSQL (but you can choose any other database provider because we'll be using Prisma ORM)

Auth:

Auth.js (Next-Auth) with Prisma Adapter

Payment Gateway:

Stripe Custom Payments

Front-End Framework:

Next.js App Router (Pages)

UI libraries:

Tailwind CSS

State Management Library:

Zustand

File Storage:

Cloudinary

Design Part of the Restaurant App

In this part, we’ll design the application using reusable React components and Tailwind CSS. It’s a great tutorial to understand the difference between Next.js server-side components and client-side components. You’ll also learn how to design a fully responsive app using Tailwind classes.

The design consists of seven pages and ten components.

src
- app
  - page.tsx (Homepage)
  - cart
    - page.tsx
  - login
    - page.tsx
  - menu
    - page.tsx
    - [categoryId]
      - page.tsx
  - orders
    - page.tsx
  - product
    - [id]
      - page.tsx
- components
  - CartIcon.tsx
  - CountDown.tsx
  - Featured.tsx
  - Footer.tsx
  - Navbar.tsx
  - Menu.tsx
  - Notification.tsx
  - Offer.tsx
  - Price.tsx
  - Slider.tsx

Full Stack Part of the Food Ordering App

In this part, we’ll create the API route and communicate with the front end. I preferred PostgreSQL, but as I mentioned above, you can use any other database because we won’t write a single line of SQL code thanks to Prisma. We’ll make all the CRUD operations using Prisma Client easily.

src
- app
  - api
    - create-intent
      - route.ts
    - confirm
      - route.ts
    - categories
      - route.ts
    - orders
      - route.ts
    - products
      - route.ts
    - auth -[…nextAuth]
      - route.ts
- docker
  - docker-compose.yml
- utils
  - auth.ts
  - connect.ts
  - store.ts

For the authentication, we’ll be using Next-Auth Prisma Adapter and it’ll handle all the auth process including sessions, user accounts, tokens, role based authorizations etc.

To do that, you need to create a schema file in prisma/schema.prisma similar to this one:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL") // Only needed when using a cloud provider that doesn't support the creation of new databases, like Heroku. Learn more: https://pris.ly/d/migrate-shadow
}

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["referentialActions"] // You won't need this in Prisma 3.X or higher.
}

model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?  @db.Text
  access_token       String?  @db.Text
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?  @db.Text
  session_state      String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  isAdmin       Boolean   @default(false)
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

We use this standard schema for the Prisma adapter; you can find it in the official documentation.

I’ve only added the isAdmin field in the user model to give a role for users. I use a boolean because my application has only two roles (admin/regular user).

Source:

Role-Based Authentication with Next.js and Prisma

After completing the authentication and CRUD operations, we’ll start adding the cart functionality. In the project, Zustand was my preference for state management.

If you prefer a simple and concise state management solution, Zustand might be a better fit.

Creating a Zustand store is as simple as calling a single function, passing a function that defines the store’s initial state and actions.

Source:

Learn more about Zustand

And finally, we’ll implement Stripe custom payments with the shipping option, and users will be able to create new orders and complete the payment process.

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check out my channel and other posts.

Other Dev.to Posts

🎥 Full Stack Youtube Clone (5 hours free tutorial)
🛍️ Full Stack E-Commerce App (+8 Hours free tutorial)
📺 Full Stack Netflix App (+7 Hours free tutorial)
🧑‍🤝‍🧑 Full Stack Social Media App (+7 Hours free tutorial)

Lama Dev

🔥 Lama Dev YouTube Channel
⚡️ Lama Dev Instagram
👾 Source Code

Full Stack Youtube Clone (5 hours free tutorial)

Safak — Sun, 17 Jul 2022 11:35:59 +0000

Hi friends, I'm Safak. I am a full-stack web developer and I'm sharing open source web projects on my dev blog and their tutorials on my YouTube channel. I've shared 3 full-stack projects so far and I want to share my 5 hours "Full Stack Video Sharing App" tutorial for free. You can find the playlist here.

What technologies are used?

Backend:

Node.js Express Framework

Database:

MongoDB, Firebase

Auth:

JWT, Cookies, Firebase Google Auth

Front-End Framework:

React.js with hooks

UI library:

Styled Components

State Management Library:

Redux

File Storage:

Firebase Storage

Design Part of the Video Sharing App

In this part, I've designed a YouTube-like video sharing app using React.js functional components, hooks and Styled Components. For the layout I preferred using Flexbox.

The app includes 4 pages and 7 small components.

src
- pages
  - Home.jsx
  - Search.jsx
  - Video.jsx
  - SignIn.jsx
- components
  - Card.jsx
  - Comments.jsx
  - Comment.jsx
  - Menu.jsx
  - Navbar.jsx
  - Recommendation.jsx
  - Upload.jsx

Full Stack Part of the Youtube Clone

In this part of the video, I've created an API using Node.js Express server with a MongoDB connection. Then created necessary models, routes and controllers in order to handle CRUD operations.

root
- models
  - User.model.js
  - Video.model.js
  - Comment.model.js
- routes
  - auth.js
  - users.js
  - videos.js
  - comments.js
- controllers
  - auth.controller.js
  - user.controller.js
  - video.controller.js
  - comment.controller.js

As you realize, there is an additional route and controller to take care of user authentication. To provide a security I've used bcryptjs and JWT library with cookies in the auth controller.

export const signin = async (req, res, next) => {
  try {
    const user = await User.findOne({ name: req.body.name });
    if (!user) return next(createError(404, "User not found!"));

    const isCorrect = await bcrypt.compare(req.body.password, user.password);

    if (!isCorrect) return next(createError(400, "Wrong Credentials!"));

    const token = jwt.sign({ id: user._id }, process.env.JWT);
    const { password, ...others } = user._doc;

    res
      .cookie("access_token", token, {
        httpOnly: true,
      })
      .status(200)
      .json(others);
  } catch (err) {
    next(err);
  }
};

And finally, I've combined the API with the UI Design in order to make the application dynamic. To fetch data and make other API requests axios was used and to handle state management, I preferred using redux-toolkit.

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check out my channel and other posts.

Other Dev.to Posts

🛍️ Full Stack E-Commerce App (+8 Hours free tutorial)
📺 Full Stack Netflix App (+7 Hours free tutorial)
🧑‍🤝‍🧑 Full Stack Social Media App (+7 Hours free tutorial)

Lama Dev

🔥 Lama Dev YouTube Channel
⚡️ Lama Dev Facebook
👾 Source Code

React Testing For Beginners

Safak — Mon, 11 Apr 2022 14:13:21 +0000

Today, we are going to talk about one of the most underrated parts of development: Testing. We all know testing is really important and a properly tested software product ensures dependability, security, and high performance, which leads to time savings, cost effectiveness, and customer satisfaction. But why do we underestimate testing even though it's not that challenging?

"Because it's boring!"

It's true. Nobody wants to be a goalkeeper instead of dancing with the ball on the field as other players do. However, you need to be aware of how much time you can waste with a faulty project. You think you've completed the product, but it comes back to you again and again. You have to check components, you have to find where the problem is. And without testing, you'll never know if it's working properly. If that sounds overwhelming enough, let's get started and see how we can test our React applications.

For a better understanding, you can watch the video version of the tutorial. It'll be more useful for beginners. Here it is:

Reading is better? Let's continue.

Firstly we need a testing library to reach DOM elements and interact with them, and need a testing framework that we can compare the test result with the real result. In this tutorial, we'll use @testing-library/react and jest. If you are using create-react-app, you don't have to install anything, the app already includes them. If you don't use create-react-app, you should run the following line.

npm install --save-dev @testing-library/react jest

Let's try to understand, how it works. To do that, we'll add some HTML elements in App.js.

function App() {

  const a = 2
  const b = 4

  return (
    <div className="app">      
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
      </ul>

      <h1 data-testid= "title">Hello</h1>
      <span title="sum">{a+b}</span>
    </div>
  );
}

export default App;

Our goal is testing:

whether the fruit list includes 3 items,
whether the h1 tag exists,
whether the span tag contains the sum of variables a and b.

Let's open App.test.js file and start out tests.

Test 1

The first thing we need to do is create a new test and giving a description.

test('should render 3 list items', () => {

});

Okey. We've described our goal. And now, we should reach DOM elements to select list items. To do that we are going to use render method of React testing library, and render our component.

import { render } from '@testing-library/react';
import App from './App';

test('should render 3 list items', () => {
  render(<App />);
});

Now we are ready to select list items to check their length. To select any DOM element we'll use React testing library queries. You have many options to do that. Let's use role based query.

import { render, screen } from '@testing-library/react';
import App from './App';

test('should render 3 list items', () => {
  render(<App />);
  const listitems = screen.getAllByRole("listitem");
});

** Since we have more than one listitem, we don't use getBy, we use getAllBy.

** screen object represents the entire HTML document in the rendered component.

Finally, we can compare the result using Jest. To to that, we'll write our expectation.

import { render, screen } from '@testing-library/react';
import App from './App';

test('should render 3 list items', () => {
  render(<App />);
  const listitems = screen.getAllByRole("listitem");
  expect(listitems).toHaveLength(3);
});

** When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things. To see all expect methods, you can check here.

And. That's all. Let's check the test result.

npm run test

And as you realize, the test passes. Congratulations. Now you can change the list item number and see how it fails.

Test 2

In this test, we are going to check whether the h1 tag exists or not. And to select h1 item we'll use another query.

<h1 data-testid= "title">Hello</h1>

This time we are using a test id to identify h1 tag. Let's use it and select the item and check for its existence.

import { render, screen } from '@testing-library/react';
import App from './App';

test('title should be rendered', () => {
  render(<App />);
  const title = screen.getByTestId("title");
  expect(title).toBeInTheDocument();
});

It's that easy.

Test 3

In the last test we are going to check the sum of variables.
a = 2
b = 4
And we are expecting 6. Let me show you another testing library query.

<span title="sum">{a+b}</span>

As you can see, we are using another identifier which is title. Let's use it and select the item and check the total number.

import { render, screen } from '@testing-library/react';
import App from './App';

test('sum should be 6', () => {
  render(<App />);
  const sum = screen.getByTitle("sum");
  expect(sum.textContent).toBe("6")
});

And now, we have 3 successful tests. Of course you can use other expect methods. It's really flexible. Let's try another method.

import { render, screen } from '@testing-library/react';
import App from './App';

test('sum should be 6', () => {
  render(<App />);
  const sum = screen.getByTitle("sum");
  expect(sum).toHaveTextContent("6")
});

It'll give us the same result. You can also try another alternatives in Jest documentation.

Now, you are able to create other basic tests on your own :) If you want to learn more advanced concepts and see how to test a real world example you should definitely check my React testing crash course video.

I hope it was useful. Thanks for reading :)

✨ My other posts
🔥 Lama Dev YouTube Channel
⚡️ Lama Dev Facebook

Full Stack E-Commerce App (+8 hours free tutorial)

Safak — Tue, 12 Oct 2021 14:11:38 +0000

Hi, I'm Safak. I am a full-stack web developer and I'm sharing open source web projects on my YouTube channel. I want to share my +8 hours "MERN Stack E-Commerce App with an Admin Dashboard" tutorial for free. You can reach the playlist from here.

What technologies are used?

Backend Server: Node.js Express Framework, JWT

Database: MongoDB

Payment Method: Stripe API

Front-End Framework: React.js with hooks

UI library: Styled Components

State Management Library: Redux

Design Part of the E-Commerce App

In this section, we are going to design an e-commerce app using React.js functional components, hooks and Styled Components. For now, we are going to be using a dummy data to display products but in the last part we'll fetch all data from MongoDb using a Rest API

Back-End Part of the E-Commerce App

In this section, we are going to create a Rest API using Express server with MongoDB connection and create necessary models and routes in order to handle CRUD operations. We'll provide the security using JWT and authenticate and authorize users. And also you'll see how easy to get payment using Stripe API

const router = require("express").Router();
const stripe = require("stripe")(process.env.STRIPE_KEY);

router.post("/payment", (req, res) => {
  stripe.charges.create(
    {
      source: req.body.tokenId,
      amount: req.body.amount,
      currency: "usd",
    },
    (stripeErr, stripeRes) => {
      if (stripeErr) {
        res.status(500).json(stripeErr);
      } else {
        res.status(200).json(stripeRes);
      }
    }
  );
});

module.exports = router;

MERN Stack Part of the E-Commerce App

In this section, we are going to combine the API with the UI Design and make our application dynamic. We'll fetch data and make POST requests using axios. And also we'll be covering Redux Toolkit in depth.

import { createSlice } from "@reduxjs/toolkit";

export const productSlice = createSlice({
  name: "product",
  initialState: {
    products: [],
    isFetching: false,
    error: false,
  },
  reducers: {
    //GET ALL
    getProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    getProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products = action.payload;
    },
    //DELETE
    deleteProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    deleteProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products.splice(
        state.products.findIndex((item) => item._id === action.payload),
        1
      );
    },
    //UPDATE
    updateProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    updateProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products[
        state.products.findIndex((item) => item._id === action.payload.id)
      ] = action.payload.product;
    },
    //ADD
    addProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    addProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products.push(action.payload);
    },
    failure: (state) => {
      state.isFetching = false;
      state.error = true;
    },
  },
});

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check out my channel and other posts.

📹 Full Stack Youtube Clone (5 Hours free tutorial)
📺 Full Stack Netflix App (+7 Hours free tutorial)
🧑‍🤝‍🧑 Full Stack Social Media App (+7 Hours free tutorial)

🔥 Lama Dev YouTube Channel
⚡️ Lama Dev Facebook
👾 Source Code

Full Stack Netflix App (7 hours free tutorial)

Safak — Thu, 29 Jul 2021 18:55:43 +0000

Hi, I'm Safak. I am a full-stack web developer and I'm sharing open source web projects on my YouTube channel. After Full Stack Social Media App project, I decided to share my 7 hours "MERN Stack Netflix Clone with an Admin Panel" tutorial.

For this project I used Express API, MongoDB, React functional components, hooks with context API. I hope you will enjoy.

Design Part of the Netflix App

In this section, we are going to design Netflix clone using React.js and Sass.

MERN Stack Part

In this section, we are going to create an Express server with the MongoDB connection. And we are going to make API requests on the client side using axios, hooks and context API.

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check my channel out.

📹 Full Stack Youtube Clone (5 Hours free tutorial)
🛍️ Full Stack E-Commerce App (+8 Hours free tutorial)
🧑‍🤝‍🧑 Full Stack Social Media App (+7 Hours free tutorial)

🔥 Lama Dev YouTube Channel
⚡️ Lama Dev Facebook
👾 Source Code

React Instant Chat App Using Node.js and Socket.io

Safak — Wed, 26 May 2021 10:00:07 +0000

Hi, I published a post and shared my 9 hours free social media application tutorial for free. But I decided to separate the application part and the chat server part. That because some of you people have already known how to create a MERN Stack application but struggle with web socket applications.

🔥 visit the full tutorial post

and, for those who finished the application part or just interested in the messenger part:

React Chat App Using Socket.io

In this section, we are going to design a React messenger component and some additional routes in Node.js to get and post chat messages. And finally you are going to learn how to use Socket.io to send instant messages and notifications.

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check my channel out.

🔥 Lama Dev Youtube Channel
⚡️ Lama Dev Facebook
👾 Source Code

Social Media App Using MERN Stack

Safak — Tue, 25 May 2021 19:58:21 +0000

If you want to be a full-stack web developer and stuck at just beginner projects, here is the chance to improve your skills and create something real. I decided to share my 9 hours tutorial series on YouTube for free.

We are going to create a social media application from scratch. And this project is not going to include just a basic couple of methods and an unpleasant design, it's going to include a complete web API, impressive React components, and chat functionality.

Let's dive into it!

Creating Node.js Rest API

In this section, we are going to create an Express server and the MongoDB connection. You are going to learn how to create Models and Routes. And after the section, you will be able to create your own web API, login and register operations, and CRUD for users and posts.

Designing React Components

In this section, we are going to design Facebook like website using reusable React components and React Hooks.

Creating MERN Stack Social Media App

In this 3rd section, we are going to combine our Rest API and React UI design. You are going to learn real-world usage of a MERN application.

Realtime Chat App Using Socket.io

I separated this part.
⚡️ Go to the messenger part

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check my channel out.

📹 Full Stack Youtube Clone (5 Hours free tutorial)
🛍️ Full Stack E-Commerce App (+8 Hours free tutorial)
📺 Full Stack Netflix App (+7 Hours free tutorial)

🔥 Lama Dev Youtube Channel
⚡️ Lama Dev Facebook
👾 Source Code