Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fajarwz/goodbook-fe

Frontend for Goodbook App. Created with React
https://github.com/fajarwz/goodbook-fe

react spa vite

Last synced: about 1 month ago
JSON representation

Frontend for Goodbook App. Created with React

Host: GitHub
URL: https://github.com/fajarwz/goodbook-fe
Owner: fajarwz
Created: 2023-12-28T15:33:23.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2024-09-04T15:50:00.000Z (5 months ago)
Last Synced: 2024-11-07T23:45:41.859Z (3 months ago)
Topics: react, spa, vite
Language: JavaScript
Homepage:
Size: 7.28 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Goodbook

Goodbook is a place for bookworms where they can dissect plot twists, analyze character arcs, and share their unique reading experiences. Find your next great read, discover hidden gems, and join a community that celebrates the magic of books. Let's turn "what did you think?" into a vibrant conversation. 

Built with Laravel and React. Laravel repo can be found here [goodbook-be](https://github.com/fajarwz/goodbook-be).

## Features

- Landing page

- Join and sign in by email

- Browse books with published at and rating filters

- Search all books

- Show a book

- Review a book

- List of user reviewed books with updated at and rating filters

- Login as admin

- Admin review list

- Admin book list

- Admin member list

## Technologies

This project is built using the following technologies:

- Backend: Laravel

- Frontend: React

- Authentication: Laravel Sanctum

- Database: MySQL

- Server State Management: React/TanStack Query

- HTTP client: Axios

## Installation

### Frontend

#### Set Up .env

Create `.env` file from `.env.example` and adjust it with your development environment.

### Install Dependencies

```bash

npm install

```

### Run the Development Server

```bash

npm run dev

```

Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.

## Screenshots

### Home Page

![Home page](docs/home.png)

### Join Page

![Join page](docs/join.png)

### Sign In Page

![Sign in page](docs/sign-in.png)

### Browse Books Page

![Browse books page](docs/books.png)

### Book Detail Page

![Book detail page](docs/show-a-book.png)

### Review A Book

![Review a book page](docs/review-a-book.png)

### My Books Page

![My books page](docs/my-books.png)

### Admin Book List Page

![Admin book list page](docs/admin-books.png)

## Demo

[![Goodbook demo](docs/sign-in.png)](https://www.youtube.com/watch?v=YkXaAFoAEvg)