art-collection

An project on practicing CRUD operations using this tech stack:

TS
React
Redux
Redux thunk pattern
Vite
Tests: Vitest
DB: SQLite uisng Knex query builder module
CSS: SASS
Architecture: component, action (with thunk action), reducer, api, route, db

TODO

As a user, I want to be able to update the art title, text and image
As a user, I want prefilled form input when I edit an art
As a user, I want to add any image, and adding gets a square section of image if not a square
As a developer, I want to test routes
As a developer, I want to test the api clients
As a developer, I want to test the db routes
As a developer, I want to test redux actions and reducers

------- And below is the default README from my-fullstack-collection-scss

Fullstack Collection App

This repo is designed to provide space to code a fullstack app. It contains node modules and folders for databases, routes, api requests, react components, and redux actions and creators. Let's get going!

Setup

0. Cloning and installation

Clone this repo, navigate to it, install packages, and start the server with npm run dev
Tip

You may also want to start a new branch
```
cd my-fullstack-collection-scss
npm i
git checkout -b <branchname>
npm run dev
```

More about using npm vs npx

When running knex, run npm run knex <command>, e.g. npm run knex migrate:latest rather than using npx
When running webpack, run npm run webpack <extra commands>, e.g. npm run webpack, rather than using npx

Requirements

1. Choosing your data set

First, decide what you would like to keep a collection of. This could be a repo for keeping track of movies, books, gifs, cars, rocks, anything you fancy, but keep it simple!

More about your collection

Note: the aim is to have some simple data. If you think you might need more than one database table, or have lots of details you want to store, how could you simplify the information you're keeping track of? Leave more complex data until later in the project. For example, I want to keep track of books that I want to read, ones that I have read, and ones that I own. To start with though, let's keep track of the books themselves. My data might look like:

id title author

1 Ready Player One Ernest Cline

2 Throwing Rocks at the Google Bus Douglas Rushkoff

id	title	author
1	Ready Player One	Ernest Cline
2	Throwing Rocks at the Google Bus	Douglas Rushkoff

Our first job is getting something showing on the front end from our database. Here's a list of steps in case they are useful. You can build in any order you like though ;)

Back end

2. Building the database

Design a database to store a list of your things (e.g. books)
Build the migrations and seed data

3. Building the API

Build an API (back end route) to get the information from your database
Test your API with Insomnia

Front end

4. Setting the stage

Build a React component with static html

Build Redux reducer. Start with a hardcoded initial state

Tip

For example:

const initialState = [{ id: 1, title: 'Ready Player One', author: 'Ernest Cline' }]

Use useAppSelector to display the redux state you hardcoded in the React Component

5. Building the API client

Build an API client in the front end to request the information from your routes

6. Building thunky actions

Build Thunk actions to use the API and get the information
Build Redux actions to save task data from the thunk
Use useAppDispatch and useEffect to dispatch the thunk when your app loads

Additional functionality

7. Adding, deleting, and updating records

Include the ability to add a new record (will need a form in your components)
Include the ability to remove/delete records
Include the ability to update records (e.g. for correcting typos)

Stretch

More about stretch challenges

Is there any complex data you chose to not include earlier or any way you could expand this dataset?
- You might have some other information (e.g. unread books vs. read books) that should be included in your database design, and this may require adjusting your database design
Could you add an external API (maybe an inspirational quote in the footer?)
If you haven't already, CSS!

Provide feedback on this repo

sleepysaurus/art-collection-ts