kentcdodds/bookshelf — 2.7k★ on GitHub (JavaScript). Build a ReactJS App workshop
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
The React and JavaScript ecosystem is full of tools and libraries to help
you build your applications. In this (huge) workshop we’ll build an
application from scratch using widely supported and proven tools and
techniques. We’ll cover everything about building frontend React
applications, from the absolute basics to the tricky parts you'll run into
building real world React apps and how to create great abstractions.
Prerequisites
You'll want experience with React before going through this material. The
lessons get progressively more advanced. Once you hit something you're
unfamiliar with, that's your cue to go back and review the other parts of
EpicReact.Dev.
NOTE: The EpicReact.dev videos were recorded with React version ^16.13 and all
material in this repo has been updated to React version ^18. Differences are
minor and any relevant differences are noted in the instructions.
System Requirements
git v2.13 or greater
NodeJS >=16
npm v8.16.0 or greater
All of these must be available in your PATH. To verify things are set up
properly, you can run this:
git --version
node --version
npm --version
If you have trouble with any of these, learn more about the PATH environment
variable and how to fix it here for windows or
mac/linux.
Demo
Hosted on https://bookshelf.lol
Setup
If you want to commit and push your work as you go, you'll want to
fork
first and then clone your fork rather than this repo directly.
After you've made sure to have the correct things (and versions) installed, you
should be able to just run a few commands to get set up:
git clone https://github.com/kentcdodds/bookshelf.git
cd bookshelf
node setup
This may take a few minutes.
If you get any errors, please read through them and see if you can find out what
the problem is. If you can't work it out on your own then please file an
issue and provide all the output from the commands you ran (even if
it's a lot).
If you can't get the setup script to work, then just make sure you have the
right versions of the requirements listed above, and run the following commands:
npm install
npm run validate
If you are still unable to fix issues and you know how to use Docker 🐳 you can
setup the project with the following command:
docker-compose up
It's recommended you run everything locally in the same environment you work in
every day, but if you're having issues getting things set up, you can also set
this up using GitHub Codespaces
(video demo) or
Codesandbox.
Running the app
To get the app up and running (and really see if it worked), run:
npm start
This should start up your browser. If you're familiar, this is a standard
react-scripts application.
You can also open the production deployment:
bookshelf.lol.
Running the tests
npm test
This will start Jest in watch mode. Read the output and
play around with it. The tests are there to help you reach the final version,
however sometimes you can accomplish the task and the tests still fail if you
implement things differently than I do in my solution, so don't look to them as
a complete authority.
Working through the exercises
To get started, run:
node go
This will allow you to choose which exercise you want to work on. From there,
open the INSTRUCTIONS.md file and follow the instructions.
If you'd like to work on an extra credit, but you want to skip the preceding
steps, you can run node go again:
node go
This will let you choose the next exercise or you can choose which part of the
exercise you'd like to work on. This will update your exercise files to the
correct version for you to work on that extra credit.
Exercises
The exercises are in different branches. Each branch changes the
INSTRUCTIONS.md file to contain instructions you need to complete the
exercise.
The purpose of the exercise is not for you to work through all the material.
It's intended to get your brain thinking about the right questions to ask me as
I walk through the material.
Helpful Emoji 🐨 💰 💯 📝 🦉 📜 💣 💪 🏁 👨💼 🚨
Each exercise has comments in it to help you get through the exercise. These fun
emoji characters are here to help you.
Kody the Koala 🐨 will tell you when there's something specific you should
do version
Marty the Money Bag 💰 will give you specific tips (and sometimes code)
along the way
Hannah the Hundred 💯 will give you extra challenges you can do if you
finish the exercises early.
Nancy the Notepad 📝 will encourage you to take notes on what you're
learning
Olivia the Owl 🦉 will give you useful tidbits/best practice notes and a
link for elaboration and feedback.
Dominic the Document 📜 will give you links to useful documentation
Berry the Bomb 💣 will be hanging around anywhere you need to blow stuff
up (delete code)
Matthew the Muscle 💪 will indicate that you're working with an exercise
Chuck the Checkered Flag 🏁 will indicate that you're working with a final
Peter the Product Manager 👨💼 helps us know what our users want
Alfred the Alert 🚨 will occasionally show up in the test failures with
potential explanations for why the tests are failing.
Workflow
Checkout the exercise branch
Read through the INSTRUCTIONS.md
Start exercise
Go through every mentioned file and follow the instructions from the emoji
We all come back together
I go through the solution and answer questions
Move on to the next exercise.
Repeat.
App Data Model
User
id: string
username: string
List Item
id: string
bookId: string
ownerId: string
rating: number (-1 is no rating, otherwise it's 1-5)
notes: string
startDate: number (Date.now())
finishDate: number (Date.now())
For convenience, our friendly backend engineers also return a book object on
each list item which is the book it's associated to. Thanks backend folks!
/me wishes we could use GraphQL
If your "database" gets out of whack, you can purge it via:
How active is development on kentcdodds/bookshelf?
The most recent commit recorded on kentcdodds/bookshelf was 6 months ago, based on the GitHub push timestamp. The repository has 1.2k forks — one of the better signals of community interest.
How many stars does kentcdodds/bookshelf have?
kentcdodds/bookshelf has 2.7k GitHub stars — refresh the page for the live number, or check github.com/kentcdodds/bookshelf. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
What language is kentcdodds/bookshelf written in?
kentcdodds/bookshelf is written primarily in JavaScript. GitHub's language field is based on the largest share of bytes in the default branch.
What topics is kentcdodds/bookshelf associated with?
GitHub's repository topics for kentcdodds/bookshelf: "epicreact-dev", "kcd-edu", "react". TopGit's editorial category is Frontend.
Where can I see kentcdodds/bookshelf in action?
The project maintains a homepage at https://www.epicreact.dev/modules/build-an-epic-react-app-v1/build-an-epic-react-app-welcome. The README tab on this page also usually contains screenshots and a quickstart.
Where do I read more about kentcdodds/bookshelf?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/kentcdodds/bookshelf is the definitive source.
Read full README in the tab above.
Still deciding about bookshelf?
One click hands the question to an AI along with this page — see what it says about bookshelf.
/bookshelf
