Cattygram

A small social network built while learning Redux Toolkit and Redux-Saga, on the API from the IT-Kamasutra React course.

Features

• Profile: user info, contacts, an editable status, and posts (posts come from JSONPlaceholder)
• Users: a paginated list with follow and unfollow
• Auth: reads the signed-in user from the course API
• Theming: styled-components with a dark palette and responsive breakpoints

Stack

• React 17 and TypeScript, built with Vite
• Redux Toolkit for state, Redux-Saga for side effects
• React Router 5, styled-components, Axios
• ESLint, Prettier and Husky pre-commit checks

Architecture

Each domain lives in src/bus/<domain> with the same layout, so data flow is easy to follow:

src/bus/users
├── api.ts         # Axios calls
├── slice.ts       # Redux Toolkit slice
├── selectors.ts
├── types.ts
└── saga/
    ├── watchers.ts
    └── workers/   # one worker per side effect: fetch, change, delete

Pages in src/pages use a useData hook that dispatches actions and reads selectors. Presentational components live in src/domain and src/components.

Getting started

Requires Node.js 18+ and Yarn 1.

git clone https://github.com/Mallaxy/Cattygram_New.git
cd Cattygram_New
yarn install
cp .env.example .env   # add your API key from social-network.samuraijs.com
yarn dev

Scripts

Command	What it does
yarn dev	Start the dev server
yarn build	Build for production into build/
yarn preview	Serve the production build
yarn check-types	Type-check with tsc
yarn check-lint	Lint with ESLint
yarn check-format	Check formatting with Prettier
yarn test-all	Run all of the above