gmovillanueva/thedoolist_client

Front-end portion of a full-stack application TheDoo List built using React, Vite, and TailwindCSS

An expanded ToDo List

A ToDo List using React, TailwindCSS, and Vite.

Quick Start

npm install

npm run dev

Table of Contents

• Features
• Commands
• Project Structure
• API Documentation
• Error Handling
• Linting
• Contributing

Features

Completed	Feature	Technology
✔️	SQL database	PostgreSQL with Prisma ORM
✔️	Authenticatione	passport
✔️	Data Validation	Joi
✔️	Logging	winston and morgan
✔️	Testing	Jest
✔️	Error handling	Centralized Error Handling
❌	API documentation	swagger-jsdoc and swagger-ui-express
✔️	Environment variables	dotenv and cross-env
❌	Security	helmet
✔️	CORS	cors
❌	Compression	gzip using compression
❌	Docker support	WIP
✔️	Linting	ESLint and Prettier
✔️	Editor config:	EditorConfig

Commands

Running locally:

npm run dev

Running in production:

npm start

Testing:

# Run Tests

Linting:

# run ESLint
npm lint

# fix ESLint errors
npm lint:fix

# run prettier
npm prettier

# fix prettier errors
npm prettier:fix

Project Structure

src\
 |--assets\         # Contains pictures, svgs, etc
 |--components\    # Multi-use components
 |--configs\            # Configuration related things such as routes
 |--features\    # Components made up of multi-use components, ie Navbar.
 |--hooks\         # Custom hooks
 |--layouts\       # Page Layout structure
 |--store\          # Houses Zustand stores
 |--utils\          # Utility classes and functions
 |--views\    # Technically pages
 |--App.jsx          # App Setup
 |--index.css        # TailwindCSS applies
 |--index.jsx       # Entry point

Current Routes

List of available routes:

Auth routes:
/auth/register - Register
/auth/login - Login\

Admin routes:
/admin - Creates user
/admin - Grab all users\

Error Handling

Linting

Linting is done using ESLint and Prettier. r.

To modify the ESLint configuration, update the .eslintrc.json file. To modify the Prettier configuration, update the .prettierrc.json file.

To prevent a certain file or directory from being linted, add it to .eslintignore and . prettierignore.

To maintain a consistent coding style across different IDEs, the project contains `.editorconfig

Contributing

Contributions are more than welcome!

License

MIT