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

Last update: Apr 21, 2022

Related tags

Overview

@Ifycode/buuks-react-client

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

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

For conditional header links rendering: MWO's answer to stackoverflow question | Hide a component in Login in react Routes
For navigating to another page on button click: Mohamed MILADI's useNavigate answer | Attempted import error: 'useHistory' is not exported from 'react-router-dom'
For PDF and form-data upload: StackedQ's answer to stackoverfolow question: How to send values like form-data postman - react js
For PDF and form-data upload: MDN - A special case: sending files
For PDF and form-data upload: handelChangeImage function from Ana Jentel's stackoverflow question
window.atob() github comment

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

66 Dec 22, 2022

🥳 Really simple React + Ant Design + Tailwind CSS + Typescript + Vite + Mobx boilerplate.

15 Dec 29, 2022

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

1.2k Jan 3, 2023

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

7 Nov 12, 2022

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

247 Dec 29, 2022

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.

6 Dec 31, 2022

🔋 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

1.4k Jan 8, 2023

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.

Project Highlights Performance. Achieved by webpack tree shaking, script bundle minification and compression (gzip and Brotli). Complimented by server

157 Dec 28, 2022

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 ⚠

7 Apr 14, 2022

Comments

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(() => { 
    // 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.
[ ] 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
[ ] 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

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

Related tags

Overview

@Ifycode/buuks-react-client

Run client app in development

Connecting to backend/database in development

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.

🥳 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

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

Astro Boilerplate with TypeScript and Tailwind CSS

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

🔋 Next.js + Tailwind CSS + TypeScript starter packed with useful development 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

Comments

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

UseEffect in useAuth hook/provider

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

Loader, and delete button prompt

Owner

Obiagba Mary Ifeoma

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS v3, Headless UI, Radix UI, and more

Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

CLI, Local API and Local client for React and Typescript: Build a Portfolio Project course.

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.

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.

This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps :rocket:

💨 A boilerplate for Vite.js, React TypeScript, & Tailwind CSS

A boilerplate generator for VR2T → Vite.js, React TypeScript, & Tailwind CSS.

🚀 A web extension starter built with React, Typescript, and Tailwind CSS.