Client for @Ifycode's buuks API (react, typescript, tailwind css)

Overview

@Ifycode/buuks-react-client


Hosted on Netlify: https://buuks.netlify.app

Screenshot 2022-03-28 at 11 55 03 PM

This is the frontend client for the buuks-express-api, built with react, typescript and tailwind css. Through the app's user interface, an (authenticated) user to interact with a database made for storing books. The app is able to do the following:

  • User signup and login (authentication)
  • Create Read Update Delete operations for books which are saved in the database
  • PDF file upload to Cloudinary

Run client app in development

The buuks client app is created with create-react-app and therefore runs at localhost port 3000. Use the command below to start the client app in development:

yarn start

Connecting to backend/database in development

Add the line below in the client app's .env file to connect to the heroku backend deployment:

REACT_APP_BASE_URL=https://buuks-express-api.herokuapp.com

Alternatively, run the backend repo locally on your computer. Then use the localhost url you supplied as the API_HOST_URL from the backend's .env file, as the value for REACT_APP_BASE_URL in the client app's .env file.

Helpful resources

You might also like...
This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

πŸ₯³ Really simple React + Ant Design + Tailwind CSS + Typescript + Vite + Mobx boilerplate.

πŸ₯³ Really simple React + Ant Design + Tailwind CSS + Typescript + Vite + Mobx boilerplate.

A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css
A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css

React JS Resume Website Template View a live demo here. If this template has helped you and you'd like to support my work, feel free to β™₯️ Sponsor the

Next.js + Tailwind CSS + TypeScript starter packed with useful development features.
Next.js + Tailwind CSS + TypeScript starter packed with useful development features.

πŸ”‹ ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Astro Boilerplate with TypeScript and Tailwind CSS

πŸš€ Astro boilerplate with responsive blog and portfolio template using TypeScript and React styled with Tailwind CSS ⚑️ Made with developer experience first: TypeScript + ESLint + Prettier + Husky + Lint-Staged + Commitlint + VSCode

Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript
Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript

πŸš€ Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚑️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS.

πŸ”‹ Next.js + Tailwind CSS + TypeScript starter packed with useful development features
πŸ”‹ Next.js + Tailwind CSS + TypeScript starter packed with useful development features

πŸ”‹ ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Boilerplate with React client and Express backend written in TypeScript. Offers performance and extended functionality. Comes with SSR and without need to learn a framework. Helps to avoid frequent React-Express integration pitfalls. Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

Comments
  • Use tailwind css and css to show, hide and animate loader component instead of javascript

    Use tailwind css and css to show, hide and animate loader component instead of javascript

    Currently, javascript intervals are used to show and hide the loader. Use tailwind CSS and CSS to show, hide, and animate the loader component instead of javascript.

    opened by Ifycode 0
  • UseEffect in useAuth hook/provider

    UseEffect in useAuth hook/provider

    useEffect(() => { 
        // Set isloading to true
    
        // read token from local storage
        // if token exists, 
            // read user data from local storage
            // set the user variable
            // set isAuthenticated to true
    
        // if token doesn't exist, 
            // set isAuthenticated to false
    
        // set isLoading to false
      }, []);
    

    One of the suggestions from @faarda

    opened by Ifycode 0
  • Improve form, add beautiful content to welcome a none registered user etc.

    Improve form, add beautiful content to welcome a none registered user etc.

    • [ ] More conventional to have the name field first at the top of the registration form (signup form).
    • [ ] Add splash screen with some beautiful content to welcome a none registered user.

    Suggestions by @HENRYKC24

    opened by Ifycode 2
  • Loader, and delete button prompt

    Loader, and delete button prompt

    • [ ] Delete button should prompt the user with a popup: "Confirm your action as this action cannot be reversed"
    • [x] Loader should also be used on the login and signup pages
    • [ ] And maybe improve loader color so that it's more visible

    Suggestion by @jiobiagba

    opened by Ifycode 0
Owner
Obiagba Mary Ifeoma
Loves to build cool projects πŸ˜ƒ
Obiagba Mary Ifeoma
βͺ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS v3, Headless UI, Radix UI, and more

βͺ Rewinds β€” Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries and the TypeScript ecosystem. This is a

M Haidar Hanif 88 Feb 11, 2023
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

React Avançado 26 Dec 4, 2022
CLI, Local API and Local client for React and Typescript: Build a Portfolio Project course.

?? JBook (CLI, Local API, Local Client) Complete project of React and Typescript: Build a Portfolio Project course. You can find the whole repo at Git

Mustafa Hayati 0 Oct 30, 2021
Full-stack React app built with Typescript, Bootstrap, Apollo client on the frontend, and NodeJS/Express, Typescript, Apollo server, and MongoDB/mongoose on the backend.

Event Scheduler App This project was bootstrapped with Create React App. Event Scheduler is a React app that allows users to create events. An event c

ahmed 8 Dec 1, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚑️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 141 Dec 29, 2022
This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. It help developer and designe

Umer Yasin 0 Oct 30, 2021
A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps :rocket:

itzmono-vite A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps ?? Batteries Included ⚑ Vite 2 ??️ TypeScript ?? React ?

Hidekazu Kobayashi 43 Dec 14, 2022
πŸ’¨ A boilerplate for Vite.js, React TypeScript, & Tailwind CSS

VR2T Boilerplate ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Installation Choose an option: Download as .ZIP then extract/un

Josh Daniel 4 Nov 25, 2021
A boilerplate generator for VR2T β†’ Vite.js, React TypeScript, & Tailwind CSS.

VR2T Boilerplate Generator ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Why Use VR2T? Without VR2T, setting up a project woul

Josh Daniel 13 Jul 22, 2022
πŸš€ A web extension starter built with React, Typescript, and Tailwind CSS.

A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, and Brave.

BCIT Design & Development Club (BCIT-DDC) 28 Dec 28, 2022