Initial cafe frontend page with backend integration

Author: fsabado00

README.md

@@ -1,39 +1,41 @@
-<p align="center">
-  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
-</p>
-
-[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
-[circleci-url]: https://circleci.com/gh/nestjs/nest
-
-  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
-    <p align="center">
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
-<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
-<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
-<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
-<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
-<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
-  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
-    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
-  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>
-</p>
-  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
-  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
-
-## Description
-
-[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
+
+# Frontend+Backend Docker Demo
+
+
+
 
 ## Installation
 
+
+
+### Run and Deploy Instantly 
 ```bash
-$ pnpm install
+$ docker-compose up
 ```
 
-## Running the app
+### Run Individually
+
+#### 1) Backend (default url http://localhost:8888)
+
+```bash
+$ cd backend
+$ pnpm install
+$ docker-compose up
+````
+
+
+#### 2) Frontend (default url http://localhost:3000)
+```bash
+$ cd frontend
+$ pnpm install
+$ pnpm run start
+````
+
+
+
+## Other useful scripts
 
+### Backend
 ```bash
 # development
 $ pnpm run start
@@ -43,11 +45,7 @@ $ pnpm run start:dev
 
 # production mode
 $ pnpm run start:prod
-```
-
-## Test
 
-```bash
 # unit tests
 $ pnpm run test
 
@@ -57,21 +55,33 @@ $ pnpm run test:e2e
 # test coverage
 $ pnpm run test:cov
 ```
-
-##
-Use Prisma CLI to apply migrations and generate the Prisma client:
+---
+> NOTE: Remember any db schema change you need to run migrate
+```bash
+$ npx prisma migrate dev
+$ npx prisma generate
+```
 
 ```bash
-npx prisma migrate dev
-npx prisma generate
+# Docker commands
+$ docker ps -a
+$ docker system prune -a
+$ docker ps -a
+$ docker rm <id>
 
 
-# Docker commands
-docker system prune -a
+# db only
 docker-compose up db
 
-```
+# frontend only
+docker-compose up frontend
+
+# backend only
+docker-compose up backend
 
-## License
+```
 
-Nest is [MIT licensed](LICENSE).
+----
+### Frontend
+###
+To know check out the guideline [Read more](./frontend/README.md)

backend/.env

@@ -4,7 +4,8 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL=mysql://root:password@localhost:3306/cedb
+#DATABASE_URL=mysql://root:password@localhost:3306/cedb
+DATABASE_URL=mysql://root:password@127.0.0.1:3306/cedb
 
 NODE_LOCAL_PORT=8888
 NODE_DOCKER_PORT=8888

backend/README.md

@@ -1,28 +1,3 @@
-<p align="center">
-  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
-</p>
-
-[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
-[circleci-url]: https://circleci.com/gh/nestjs/nest
-
-  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
-    <p align="center">
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
-<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
-<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
-<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
-<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
-<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
-  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
-    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
-  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>
-</p>
-  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
-  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
-
-## Description
 
 [Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
 
@@ -57,17 +32,94 @@ $ pnpm run test:e2e
 # test coverage
 $ pnpm run test:cov
 ```
-
+ 
 ##
 Use Prisma CLI to apply migrations and generate the Prisma client:
 
 ```bash
 npx prisma migrate dev
 npx prisma generate
 
-docker system prune -a
 ```
 
+## API
+
+Default service api url
+http://location:8888
+
+> CRUD Operations:
+### Employees
+
+* READ: /employees (GET)
+* READ: /employees/:id (GET)
+* CREATE: /employees (POST)
+* UPDATE: /employees/:id (PATCH)
+* DELETE: /employees/:id (DELETE)
+
+### Cafes
+
+* READ: /cafes (GET)
+* READ: /cafes/:id (GET)
+* CREATE: /cafes (POST)
+* UPDATE: /cafes/:id (PATCH)
+* DELETE: /cafes/:id (DELETE)
+
+### Sample
+
+**Create Cafes**
+<img src="screenshots/cafe.png" />
+Request:
+```json
+{
+  "name": "Cafe2",
+  "description": "Some desc",
+  "employees": 2,
+  "logo": "somelogo.png",
+  "location": "sg"
+}
+
+```
+
+Response
+```json
+{
+  "id": 3,
+  "name": "Cafe2",
+  "description": "Some desc",
+  "employees": 2,
+  "logo": "somelogo.png",
+  "location": "sg"
+}
+```
+----
+**Create Employees**
+<img src="screenshots/employee.png" />
+
+Request:
+```json
+{
+  "name": "Employee1",
+  "email_address": "test@test.com",
+  "phone_number": "+658888888",
+  "days_worked":   1,
+  "cafe": "Cafe1"
+}
+
+```
+
+Response
+```json
+{
+  "id": 1,
+  "name": "Employee1",
+  "email_address": "test@test.com",
+  "phone_number": "+658888888",
+  "days_worked": 1,
+  "cafe": "Cafe1"
+}
+```
+
+
 ## License
 
 Nest is [MIT licensed](LICENSE).

backend/prisma/schema.prisma

@@ -1,8 +1,6 @@
 generator client {
   provider      = "prisma-client-js"
   binaryTargets = ["native", "debian-openssl-3.0.x"]
-  // binaryTargets = ["native", "darwin", "debian-openssl-1.1.x"]
-  // binaryTargets = ["native", "linux-musl-openssl-3.0.0"]
 }
 
 datasource db {
@@ -14,9 +12,9 @@ model Cafes {
   id          Int    @id @default(autoincrement())
   name        String @unique
   description String
-  employees   Int
   logo        String
   location    String
+  employees   Int
 }
 
 model Employees {

backend/screenshots/cafe.png

@@ -2,19 +2,11 @@ import { Module } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { DatabaseModule } from './database/database.module';
-import { ProductsModule } from './products/products.module';
-import { ReviewsModule } from './reviews/reviews.module';
 import { CafesModule } from './cafes/cafes.module';
 import { EmployeesModule } from './employees/employees.module';
 
 @Module({
-  imports: [
-    DatabaseModule,
-    ProductsModule,
-    ReviewsModule,
-    CafesModule,
-    EmployeesModule,
-  ],
+  imports: [DatabaseModule, CafesModule, EmployeesModule],
   controllers: [AppController],
   providers: [AppService],
 })

backend/screenshots/employee.png

@@ -4,6 +4,15 @@ import { AppModule } from './app.module';
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   const port = process.env.NODE_DOCKER_PORT;
-  await app.listen(port);
+  const options = {
+    origin: '*',
+    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
+    preflightContinue: false,
+    optionsSuccessStatus: 204,
+    credentials: true,
+  };
+
+  app.enableCors(options);
+  await app.listen(8888);
 }
 bootstrap();

backend/src/app.module.ts

@@ -2,6 +2,75 @@
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
+
+### Features
+
+- ⚡ [React.js](https://react.dev/)
+- ⚡ [Material-UI](https://mui.com/)
+- 🔥 Type checking [TypeScript](https://www.typescriptlang.org)
+- 💎 Integrate with [Tailwind CSS](https://tailwindcss.com)
+- ✅ Strict Mode for TypeScript and React 18
+- 📏 Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
+- 💖 Code Formatter with [Prettier](https://prettier.io)
+- 🦊 Husky for Git Hooks
+- 🚫 Lint-staged for running linters on Git staged files
+- 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript, Jest
+
+### Requirements
+
+- Node.js 16+ and pnpm
+
+### Getting started
+
+Run the following command on your local environment:
+
+```shell
+git clone --depth=1 https://github.com/sonht113/react-boilerplate-for-starter.git
+cd my-project-name
+pnpm install
+```
+
+Then, you can run locally in development mode with live reload:
+
+```shell
+pnpm run dev
+```
+
+Open http://localhost:5173 with your favorite browser to see your project.
+
+```shell
+.
+├── README.md                       # README file
+├── .github                         # GitHub folder
+├── .husky                          # Husky configuration
+├── public                          # Public assets folder
+├── src
+│   ├── apis                        # Common apis folder
+│   ├── components                  # Component folder
+│   ├── configs                     # Config and constants
+│   └── api                         # api and services hooks
+│   ├── hooks                       # Hooks customs folder
+│   ├── layouts                     # Layout Pages
+│   └── pages                       # React JS Pages
+│   ├── providers                   # Provider folder
+│   └── routes                      # Routes folder
+│   ├── helpers                     # Shared types and utils functions
+│   ├── @types                      # typescript defintions
+├── tailwind.config.js              # Tailwind CSS configuration
+└── tsconfig.json                   # TypeScript configuration
+```
+
+### Customization
+
+- `src/index.css`: your CSS file using Tailwind CSS
+- `src/main.tsx`: default theme
+
+You have access to the whole code source if you need further customization. The provided code is only example for you to start your project. The sky is the limit 🚀.
+
+
+---
+
+
 Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh