DEV Community: Said Mounaim

Movie App With Next.js 13, TailwindCSS & TypeScript 😍

Said Mounaim — Thu, 26 Jan 2023 15:01:58 +0000

Movie App

A movie app that allows users to view and search for movies, and see details of each movie. This app is still in progress and is built using Next.js 13, TailwindCSS, TypeScript, and TheMovieDB API.

Getting Started

Clone the repository: git clone https://github.com/saidMounaim/nextjs13-movie-app.git
Install dependencies: npm install
Start the development server: npm run dev

Built With

Contribution

All kind of contributions are welcome, please feel free to submit pull requests.

Job Portal API Using Node.js, Express.js, Prisma & TypeScript

Said Mounaim — Sun, 22 Jan 2023 14:33:00 +0000

Job Portal API

This API allows users to create an account, login, update their profile, upload their resume, and add, update, and delete job listings. Users can also apply for jobs and view all jobs they have applied for.

The API is built using Node.js, Express.js, Prisma and TypeScript.

Getting Started

Clone the repository: git clone https://github.com/saidMounaim/job-portal-api.git
Install dependencies: npm install
Start the development server: npm run dev
Make sure you have running prisma cli and prisma server

Endpoints

POST /users: Create a new user account
POST /users/login: Login to an existing user account
PUT /users/:id: Update a user's profile
PUT /users/:id/resume: Upload a user's resume
POST /jobs: Add a new job listing
PUT /jobs/:id: Update an existing job listing
GET /jobs/:id: Retrieve a single job listing
DELETE /jobs/:id: Delete a job listing
POST /jobs/:id/apply: Apply for a job listing
GET /users/:id/jobs: Retrieve all jobs a user has applied for

Note

This project is still under development and the endpoints may not be completely functional yet.

Contribution

All kind of contributions are welcome, please feel free to submit pull requests.

Github Repo: https://github.com/saidMounaim/job-portal-api
Github Profile: https://github.com/saidMounaim/

JWT Authentication Using Express.js & MongoDB With TypeScript

Said Mounaim — Wed, 11 Jan 2023 21:57:49 +0000

Auth-TS

JWT Authentication Using TypeScript, Express.js, & MongoDB

Features:

Authentication

Technology Stack:

TypeScript
Node.js
Express.js
MongoDB
JWT

Default urls:

Login User : POST METHOD localhost:5000/api/auth
Register User : POST METHOD localhost:5000/api/auth/register
Get All Users : GET METHOD localhost:5000/api/auth/

Usage

Env Variables

Create a .env file in then root and add the following

PORT = 5000
MONGO_URI = your mongodb uri
JWT_SECRET = 'abc123'

Install Dependencies

npm install

Run App


# Run in dev mode

npm run server

Version: 1.0.0
License: MIT
Author: Said Mounaim

Github Repo: https://github.com/saidMounaim/Auth-TS

For more projects, see my Github Profile
https://github.com/saidMounaim

Authentication with credentials using Next-Auth & MongoDB

Said Mounaim — Sun, 09 Oct 2022 14:26:26 +0000

For create Login Authentication we're going to use Next-Auth package from Vercel Here is the link Next-Auth ,

Let's install it open your terminal and run

npm i next-auth

next step is creating a folder inside Api and set folder name to auth and inside auth create new file set filename to [...nextauth].js every sign in, sign out & checking the authentication will be redirected to this file and we need to handle it

let's start by importing Next-Auth

import NextAuth from "next-auth";

then export default NextAuth it's a function that accept Object as a parameter for Object we need to set some properties the fist one is session and inside session we're going to use jwt as a strategy

import NextAuth from "next-auth";

export default NextAuth({
  session: {
    strategy: "jwt",
  }
})

next setting for the NextAuth function is callbacks is an object and inside that we need to define function it is jwt it's an async function and jwt accept two parameter the first one is session and the second one is user, inside jwt function we check user id if does it exist and fill token id with user id and return the token.

user id is coming from database and token in NextAuth life cycle

import NextAuth from "next-auth";

export default NextAuth({
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user?._id) token._id = user._id;
      if (user?.isAdmin) token.isAdmin = user.isAdmin;
      return token;
    },
  },
})

in the next callbacks we're going to define session function it accept two parameter session and token,

in the session function we check token if does it exist and fill session with token and at the end return session.

import NextAuth from "next-auth";

export default NextAuth({
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user?._id) token._id = user._id;
      if (user?.isAdmin) token.isAdmin = user.isAdmin;
      return token;
    },
    async session({ session, token }) {
      if (token?._id) session.user._id = token._id;
      if (token?.isAdmin) session.user.isAdmin = token.isAdmin;
      return session;
    },
  },
})

let's going for the next setting is define a providers is an Array and the provider that we're going to use is CredentialsProvider we're going to authenticate user based in MongoDB database not using Github Authentication or Google Login.

we're using CredentialsProvider in parameter define an object and inside define authorize function is an async function accept credentials as a parameter inside we need to connect to database and find the user in database based in email in the credentials parameter,
we need to import ConnectDB from config folder, and User from models folder.

next step is checking user and password together if user exist it means that we have user with that email and checking the password if it is correct then we need to return an object, the object is coming from database.

import NextAuth from "next-auth";
import connectDB from "../../../config/db";
import CredentialsProvider from "next-auth/providers/credentials";
import User from "../../../models/User";
import bcrypt from "bcryptjs";

export default NextAuth({
  session: {
    strategy: "jwt",
  },

  callbacks: {
    async jwt({ token, user }) {
      if (user?._id) token._id = user._id;
      if (user?.isAdmin) token.isAdmin = user.isAdmin;
      return token;
    },
    async session({ session, token }) {
      if (token?._id) session.user._id = token._id;
      if (token?.isAdmin) session.user.isAdmin = token.isAdmin;
      return session;
    },
  },
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        connectDB();
        const user = await User.findOne({ email: credentials.email });
        if (user && bcrypt.compareSync(credentials.password, user.password)) {
          console.log(user);
          return {
            _id: user._id,
            name: user.name,
            email: user.email,
            isAdmin: user.isAdmin,
          };
        }
        throw new Error("Invalid Email or Password");
      },
    }),
  ],
});

AMAZIING, we implement the sign in function and we configured NextAuth function next step is go to login page inside the page we need to handle submission

import Link from "next/link";
import React, { useEffect, useState } from "react";
import Layout from "../components/Layout";
import { useForm } from "react-hook-form";
import { signIn, useSession } from "next-auth/react";
import { toast } from "react-toastify";
import { getError } from "../utils/error";
import { useRouter } from "next/router";

const login = () => {
  const { data: session } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (session?.user) router.push("/");
  }, [session, router]);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const handleLogin = async ({ email, password }) => {
    try {
      const result = await signIn("credentials", {
        redirect: false,
        email,
        password,
      });
      if (result.error) toast.error(result.error);
    } catch (err) {
      toast.error(getError(err));
    }
  };
  const handleError = (errors) => {};

  const loginOptions = {
    email: {
      required: "Email is required",
      pattern: {
        value: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/i,
        message: "Email not valid",
      },
    },
    password: {
      required: "Password is required",
    },
  };

  return (
    <Layout title="Login">
      <form
        className="mx-auto max-w-screen-sm"
        onSubmit={handleSubmit(handleLogin, handleError)}
      >
        <div className="flex flex-col mt-4 mb-5">
          <h1 className="text-[30px] text-[#06283D] font-medium">Login</h1>
        </div>

        <div className="flex flex-col mb-3">
          <label
            htmlFor="email"
            className="text-[17px] text-[#06283D] font-medium mb-2"
          >
            Email
          </label>
          <input
            type="text"
            id="email"
            {...register("email", loginOptions.email)}
            autoFocus
          />
          {errors?.email && (
            <p className="text-[16px] text-red-500">{errors.email.message}</p>
          )}
        </div>
        <div className="flex flex-col mb-3">
          <label
            htmlFor="password"
            className="text-[17px] text-[#06283D] font-medium mb-2"
          >
            Password
          </label>
          <input
            type="password"
            id="password"
            {...register("password", loginOptions.password)}
            autoFocus
          />
          {errors?.password && (
            <p className="text-[16px] text-red-500">
              {errors.password.message}
            </p>
          )}
        </div>
        <button className="bg-[#06283D] px-5 py-3 text-white font-medium text-center rounded-sm">
          Login
        </button>
        <div className="flex flex-col mt-4 text-[#06283D] text-[16px] font-medium">
          Don't have an account, <br />
          <Link href="/register">Register</Link>
        </div>
      </form>
    </Layout>
  );
};

export default login;

Online Clothing Store using the MERN stack

Said Mounaim — Wed, 28 Sep 2022 09:38:46 +0000

Online Clothing Store using the MERN stack

Features:

Product reviews and ratings
Product pagination
Product search feature
User profile with orders
Full featured shopping cart
Admin product management
Admin user management
Admin Order details page
Mark orders as delivered option
Checkout process (shipping, payment method, etc)
PayPal / credit card integration
Database seeder (products & users)

Technology Stack:

Node js
Express Js
MongoDB
JWT
React
React Bootstrap
Redux
React Paypal Button V2

Demo: https://clothshopapp.herokuapp.com/
Github Repo: https://github.com/saidMounaim/cloth-shop

Hotel Booking App Using The MERN Stack With TypeScript

Said Mounaim — Tue, 27 Sep 2022 19:23:36 +0000

HotelBooking

Hotel Booking App Using The MERN Stack With TypeScript & Redux 🤩

Features:

Room reviews and ratings
Room pagination
Room search feature
User profile with bookings
Admin Room management
Admin User management
Admin Booking management

Technology Stack:

TypeScript
Node js
Express Js
MongoDB
JWT
React
React Bootstrap
Redux
React Paypal Button V2

Repo Github : https://github.com/saidMounaim/hotel-booking

Starter Full Stack App with Next JS Using Redux 😍

Said Mounaim — Wed, 29 Sep 2021 21:15:56 +0000

Starter Full Stack App with Next JS Using Redux

Boilerplate for creating fullstack apps using following technologies:

Frontend Technologies:

Next js
Redux

Backend Technologies:

Node.js
MongoDB
Mongoose

The frontend and the backend are completely independent of each other.

Github : https://github.com/saidMounaim/starter-nextjs

File sharing API Using Node js & Express js

Said Mounaim — Sat, 25 Sep 2021 19:23:03 +0000

FileSharing

File sharing API Using Node js & Express js

Features:

File sharing

Technology Stack:

Node js
Express Js
MongoDB

Default urls:

Upload File : localhost:5000/api/upload
Get All Files : localhost:5000/api/files
Download File : localhost:5000/api/download/:fileId

Install Dependencies

npm install

Run App

# Run in dev mode
npm run server

Github : https://github.com/saidMounaim/FileSharing

Portfolio React Hooks

Said Mounaim — Fri, 24 Sep 2021 13:29:45 +0000

Said MOUNAIM

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need Git and Node.js (which comes with npm) installed on your computer.

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

Github : https://github.com/saidMounaim/SMPortfolio

Node.js API Authentication With JWT

Said Mounaim — Fri, 24 Sep 2021 07:58:18 +0000

UserAuth

Node.js API Authentication With JWT

Features:

Authentication

Technology Stack:

Node js
Express Js
MongoDB
JWT

Default urls:

Usage

"/.env" update the values/settings to your own

Install Dependencies

npm install

Run App

# Run in dev mode
npm run server

Github Repo : https://github.com/saidMounaim/UserAuth

Awesome Things Related To React Hooks 😍

Said Mounaim — Thu, 23 Sep 2021 07:32:55 +0000

awesome-react-hooks

A curated list of awesome things related to React Hooks

Resources

Official

Official Documentation

Related awesome lists

General

Articles

Packages

React Hot Toast - The Best Toast in Town. Smoking hot React notifications.
React Content Loader - SVG-Powered component to easily create placeholder loadings (like Facebook’s cards loading).
React Filepond - A new way to upload files
React Notion X - Fast and accurate React renderer for Notion. TS batteries included. ⚡ ️
React Select - A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.
Sweet Alert - A beautiful replacement for success messages, error messages or info messages
React Infinite Scroller - Infinitely load content using a React Component.
React DnD - A React utility to help you build complex drag and drop interfaces while keeping your components decoupled.
Draft JS - Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
ChartJS - Build beautiful charts in minutes with Chartjs, Dashboards will looks sexy like never before.
React Slick - React carousel component. One of the best sliders out there to showcase anything.
React Auto Suggest - WAI-ARIA compliant autosuggest component built in React
React Burger Menu - An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.
React Spinners - A collection of loading spinner components for react
React Bootstrap Datatable - Next Generation of react-bootstrap-table. Datatable made easy like never before.
Styled Components - styled-components is the result of wondering how we could enhance CSS for styling React component systems.
use-abortable-stream-fetch - React hook for fetching streams that can be aborted.
React API Hooks - React hooks to interact with an API from a stateless component using axios.
React Use Smooth Scroll - React Provider Component to add a smooth scroll effect 😍
React Use Mail To - Renders a link formatted to send an email (mailto: link).
use-abortable-fetch - React hook that does a fetch and aborts when the components is unloaded or a different request is made
easy-peasy - Vegetarian friendly state for React
React Hooks Lib - A set of reusable React Hooks.
react-powerhooks - Hooks api for react-powerplug components
use-events - 🍭 Event hooks
react-apollo-hooks - Use Apollo Client as React hooks
react-recipes - 👩‍🍳 A list of React Hooks utility library containing popular customized hooks
react-hookedup - 👽 A collection of useful React hooks
react-hooks-axios - Custom React Hooks for Axios.js
rest-hooks - Delightful data fetching for React.
use-call - useCall React hook
react-use-clipboard - React hook that provides copy to clipboard functionality.
constate - React Context + State
rooks - Essential React custom hooks ⚓ to super charge your components!
navi - 🧭 Declarative, asynchronous routing for React.
react-firebase-hooks - React Hooks for Firebase.
use-file-input - React Hooks for file selection with hidden
react-hook-form - 📋 React Hooks for forms validation (Web + React Native)
react-hooks-image-size - Custom React Hooks for image natural size
use-key-hook - React hook to handle all the key press.
use-http - 🐶 React hook for making isomorphic http requests
use-media - useMedia React hook to track CSS media query state
use-debounce - A debounce hook for react
local-storage - React hook which syncs localStorage[key] with the comp.
react-useportal - 🌀 React hook for Portals
REACT ROUTER - React Router ships with a few hooks that let you access the state of the router and perform navigation from inside your components.
ant-design - An enterprise-class UI design language and React UI library
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
react-bootstrap - Bootstrap components built with React
Semantic-UI - Semantic is a UI component framework based around useful principles from natural language.
evergreen - 🌲 Evergreen React UI Framework by Segment
reakit - Toolkit for building accessible rich web apps with React

For More Check the repo

https://github.com/saidMounaim/awesome-react-hooks

An online shop API Node js 🤩

Said Mounaim — Sun, 19 Sep 2021 11:24:24 +0000

onlineshop-api

An API for online store

Features:

Authentication
Products listing
Order placements

Technology Stack:

Node js
Express Js
MongoDB
JWT

Github : https://github.com/saidMounaim/onlineshop-api

Follow me on github : https://github.com/saidMounaim/