React + LoopBack + MongoDB Todo App

A full-stack todo application demonstrating a LoopBack REST API backed by MongoDB, consumed by a React single-page app with Redux state management and token-based authentication.

What's inside

• server/ — LoopBack API server with a MongoDB connector, auto-generated REST CRUD endpoints for User and Todo models, role-based ACLs (admin role), token authentication, and a built-in API Explorer.
• web/ — React single-page app (Create React App tooling) with Redux via Rematch, React Router, Formik forms, Bootstrap/Reactstrap UI components, and Sass styling.

Tech stack

• Backend: Node.js, LoopBack, MongoDB (loopback-connector-mongodb), Helmet, CORS, strong-error-handler
• Frontend: React, Redux, Rematch (@rematch/core, @rematch/loading, @rematch/persist), React Router, Formik, Axios, Bootstrap, Reactstrap, Sass, Alertify.js, Font Awesome

Project structure

server/
  common/models/    todo.js, todo.json, user.js, user.json   — data models, validation, ACLs
  server/boot/      authentication.js, default-user.js (seeds the admin user), root.js
  server/
    datasources.json  MongoDB connection config
    config.json       REST API root ("/api"), host/port
web/
  src/pages/        auth/login, home, todo (list, add, edit)
  src/store/        Redux store + Rematch models
  src/routes/       route definitions, including auth-guarded routes
  src/config/       API base URL and app config

Quickstart

Prerequisites: Node.js, Yarn, and a running MongoDB instance on localhost:27017 (database name react-loopback, configurable in server/server/datasources.json).

Backend

cd server
yarn install
yarn start

API Explorer: http://localhost:3000/__explorer

Frontend

cd web
yarn install
yarn start

App: http://localhost:3001 (port configurable via PORT in web/.env)

On first boot the server seeds a default user:

username: admin
password: password

Production build

cd web
yarn build

This builds the React app and moves the output into server/client, so the LoopBack server can serve the frontend directly.

Key endpoints / screens

REST API (base path /api, auto-generated by LoopBack):

• POST /api/users/login — authenticate, returns an access token
• GET/POST /api/users — user management (admin role only)
• GET/POST/PATCH/DELETE /api/todos — todo CRUD; denied for unauthenticated requests by ACL
• GET /__explorer — interactive API Explorer

Frontend routes:

• /auth/login — login screen
• / — home
• /todo — todo list (requires authentication)
• /todo/add, /todo/edit/:id — create/edit a todo (requires authentication)