We’ll build a React+State Management Content Platform. It can be a platform for any type of content you desire. As long as there are individual content items that have some content that need to be saved to a database! Aside from the core functionality of creating an item with title and content, showing those, editing the fields, and deleting, you should feel free to be creative with it. It will basically be a CRUD platform — create, read, update, delete, storing data on a server with best practices, user authentication, and security — those features encompass a world of possibilities.
We’ll build out a Create+Update+Delete (CRUD) style content app using React and state management and React-Router. We will use an API server hosted at: https://platform.cs52.me/api.
For now the API only supports title, content, tags, coverUrl, but even with just those fields (especially if content supports markdown) you could think of other things that you could display. Menu Items for a restaurant. Or even quiz answers (you’ll be able to add fields in Lab 5).
Be creative and make this your own.
🍰 Feel free to use any CSS or React Component Libraries that you want.
We will rip out platform.cs52.me/api and build our own Nodejs+Express+Mongo based API server. Finally FULL-STACK! You’ll be able to modify the data model at this point and really make your platform do anything. We’ll also add authentication and image uploading!
🚀 Clone you classmoji.brunchlabs.com generated repo. Then you’ll pull in your vite+babel+eslint+react+routing+zustand starter code like so:
#make sure you are in your project directory
git remote add starter URL_TO_YOUR_STARTERPACK
git pull starter main # you may need --allow-unrelated-histories
# also don't forget to run:
npm install #to fetch all your package.json dependencies
We’ll be using an API server running at https://platform.cs52.brunchlabs.com/api
The API has the following endpoints:
/api/posts/ returns only title, tags, and id for all posts, not content [[{"id":"",title":"","tags":"", "coverUrl":""},...]/api/posts/ with post parameters {'title', 'tags', 'content', 'coverUrl'} creates a new post