Frontend Build with React Next.js for view Service User with Express

Overview

Frontend Service Users

Project ini saya buat dengan Next.js, React hook, Tailwind, Daisy, Typescript dan Axios

Cara memulai dan menjalankan project

Merubah PORT sesuai config PORT di backend

Berikutnya untuk merubah PORT backend sesuai config env backend, masuk ke Folder Pages, yang perlu dirubah port nya di file

  • Profile.tsx untuk profile endpoint, terus masuk folder
  • auth/register.tsx untuk register,
  • auth/login.tsx untuk login, dan di folder
  • component/navbar.tsx untuk ngerubah port endpoint logout

Kalau sudah, jalankan dengan perintah npm run dev

Otomatis akan berjalan di port 3000. akan tampil halaman index dan progress bar akan berjalan sampai penuh, otomatis akan diredirect ke halaman login.

Mendaftar User

Jika belum ada user di database, bisa daftar ke hamburger profile kanan atas dan pilih register password yang dimasukkan harus cocok, kalau tidak cocook akan mengeluarkan errror "password tidak cocok" dan email harus terisi, Jika tidakk akan mengeluarkan error "email wajib diisi"

kalau sudah terisi semua, register. dan otomatis kalau sukses di arahkan ke halaman login

Login User

Masukkan email dan password sesuai di database Kalau sudah login, diarahkan ke menu profile, data lainnnya null, jadi kosong, untuk menu setting update nya masih belum karena saya ada gangguan di minggu minggu ini, jadi untuk menge test nya bisa mengupdate manual di mysql phpmyadmin, kecuali kolom cover dan phooto.

kalau sudah terisi, reload halaman profile , otomatis data akan tampil otomatis. sesuai data di database

Logout Users

Untuk log out klik kanan atas profile Klik Logout, otomatis refresh token akan di cleardari cookies, dan diredirect ke halaman login. sehingga kalau masuk ke halaman profile lagi, akan ditolak, dan diredirect ke halaman login lagi.

Preview Halaman Home ketika dijalankan pertama kali

Judul halaman di atas akan otomatis tampil sesuai kondisi halaman. Kalau sedang di homepage, akan tampil Homepage Dan karena awal user belum login, jadi untuk nama user di pojok kanan atas masih undefined karena tidak terdeteksi access token yang valid. previewhome

Preview Halaman Profile

Jika sudah sukses login, akan tampil seperti ini. Nama user di pojok kanan atas otomatis ter update. Sesuai access token preview

Letak tombol log out untuk mengakhiri sesi dan refresh token

Halaman Profile di required untuk login dahulu, jadi ketika sudah logout , masuk ke profile lagi akan ditolak logout

Mobile Friendly, menggunakan Tailwind CSS, Daisy + Grid

Karena selalu suka mobile version, jadi tidak lupa untuk responsive nya
mobile

Thank You ..... Greeting from Ferdian Ahmad R

You might also like...
Github-user-finder - Github User Finder With React.js
Github-user-finder - Github User Finder With React.js

Github User Finder Aplicação que permite a busca por nome de usuários do Github

Readme.md generator is a React application that takes basic information about the user's project as an input and generates a README file which the user can upload directly in their project's repository.
Readme.md generator is a React application that takes basic information about the user's project as an input and generates a README file which the user can upload directly in their project's repository.

An application that takes basic information about the user's project as an input and generates a README.md file which the user can upload directly in their project's repository.

Apollo Client service for React applications

graphql-react-client Apollo Client service for React applications Installing Using npm: npm i -s graphql-react-client Using yarn: yarn add graphql-rea

A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK
A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK

Spotify Clone Front-End A front-end clone project of the Spotify web player. The project was created using the create-react-app CLI. The app is meant

Flagsmith is an open source, fully featured, Feature Flag and Remote Config service
Flagsmith is an open source, fully featured, Feature Flag and Remote Config service

Flagsmith is an open source, fully featured, Feature Flag and Remote Config service. Use our hosted API, deploy to your own private cloud, or run on-premise.

 Simple Page of 'Health Related Service' (City Psyciatric Hospital) - Assignment (Milestone - 10)
Simple Page of 'Health Related Service' (City Psyciatric Hospital) - Assignment (Milestone - 10)

Assignment of Milestone 10 , Making an Website (Health Care Service) with Firebase , Private React Router, JavaScript (ES6) , Custom JSON & Tailwind Etc.

This uses Azure AI Text Analytics services to teach on how to connect an AI service to a web-based system

Azure AI: Text Analytics services using react This app uses the Azure text analytics services to call various services such as sentiment analysis, ent

MERN Project: Ema John Online Shopping Service

#MERN Project Ema John Live site link- https://ema-john-app-web.netlify.app/ Used technologies React Javascript React Router Private Routing Context A

Party Parrot as a Service is your one-stop-shop for all your party parrot needs
Party Parrot as a Service is your one-stop-shop for all your party parrot needs

Demo https://party.highlight.run Team Cameron Brill (@c00brill) Jay Khatri (@theJayKhatri) John Pham (@JohnPhamous) About Party Parrot as a Service Pa

Owner
Ferdian Ahmad R
Ferdian Ahmad R
🎵 The frontend of Oud, an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.

Oud Front-End Table of Contents About the Project Build with Getting Started Installation Running Screenshots Videos File Structure Unit Testing Runni

Ahmed Ashraf 48 Sep 29, 2022
Jubelio POS Print Service build with Electron and ReactJS

Jubelio POS Print Service A Print service for Jubelio POS Web-Based. These apps helped to connect with hardware like Printer or etc with the USB metho

Apsyadira 5 Aug 5, 2022
Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

?? Shopping App ?? Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚡️ ⚡️ ⚡️ Kiwi Shop ⚡️ ⚡️ ⚡️ ?? Table of contents Main

Tomiwa Adeyemi 9 Jul 27, 2022
Docker Tutorial | Nodejs + Express + Mongodb + React + Redis + Nginx| Nodejs + Express + Mongodb + React + Redis + Nginx

Docker Tutorial | Nodejs + Express + Mongodb + React + Redis + Nginx How to use Docker to build and develop Nodejs, Express, Mongodb, React, and Redis

null 17 Aug 1, 2022
Backend for probook social media app using Nodejs, mongodb, express, jwt etc. Frontend is React, redux, material ui.

Probook - A social media app Probook App | A Social Media App An social media platform built using ReactJS, Redux Toolkit,Material UI, Node, Express,

Wasif Baliyan 22 Sep 30, 2022
React-ecommerce-frontend - A E-ccomerce website frontend built in React.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Sammwy 1 Feb 5, 2022
Framework frontend Javascript yg dibuat untuk belajar lebih memahami tentang sistem reactivity pada framework2 frontend modern.

Fremwok-Fremwokan Framework frontend Javascript yg dibuat untuk belajar lebih memahami tentang sistem reactivity pada framework2 frontend modern. jika

Faizal Amiruddin 12 Sep 2, 2022
Build apps with Node, Express, Apollo, React

Welcome to NEAR (Node, Express, Apollo, React) This is a very early release and a work in progress. untested atm This project is a an attempt to creat

Shlomi Zadok 0 Jan 10, 2022
A User Searcher To Get User Information Built With React

Search github users A simple service to search github users and get their information. All information are from api.github.com Available Scripts In th

Vikram Aditya 10 Dec 16, 2021
TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

Lucas Azzolini Vieira 7 Apr 13, 2022