Merge pull request #1 from f-lab-edu/feature/init-setup

[Feature] Initial project setup

.eslintrc.base.json

@@ -0,0 +1,89 @@
+{
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:prettier/recommended",
+		"plugin:import/recommended",
+		"plugin:import/typescript"
+	],
+	"plugins": [
+		"@typescript-eslint",
+		"prettier",
+		"import"
+	],
+	"rules": {
+		"prettier/prettier": [
+			"error",
+			{
+				"useTabs": true
+			}
+		],
+		"quotes": [
+			"error",
+			"single"
+		],
+		"jsx-quotes": [
+			"error",
+			"prefer-single"
+		],
+		"@typescript-eslint/no-unused-vars": "error",
+		"@typescript-eslint/no-explicit-any": "warn",
+		"no-console": [
+			"warn",
+			{
+				"allow": [
+					"warn",
+					"error"
+				]
+			}
+		],
+		"import/order": [
+			"error",
+			{
+				"groups": [
+					"builtin",
+					"external",
+					"internal",
+					[
+						"sibling",
+						"parent"
+					],
+					"index",
+					"type"
+				],
+				"pathGroups": [
+					{
+						"pattern": "@/**",
+						"group": "internal",
+						"position": "after"
+					}
+				],
+				"newlines-between": "always",
+				"alphabetize": {
+					"order": "asc",
+					"caseInsensitive": true
+				}
+			}
+		],
+		"import/no-duplicates": "warn",
+		"no-multiple-empty-lines": [
+			"error",
+			{
+				"max": 1,
+				"maxBOF": 0,
+				"maxEOF": 0
+			}
+		],
+		"import/newline-after-import": [
+			"error",
+			{
+				"count": 1
+			}
+		]
+	},
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": 2020,
+		"sourceType": "module"
+	}
+}

.gitignore

@@ -122,9 +122,17 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
+# Yarn
+.yarn/*
 .pnp.*
+
+# pnpm
+.pnpm-store/
+pnpm-lock.yaml
+
+# Turbo
+.turbo
+
+# DS_Store files
+**/.DS_Store
+.DS_Store

.prettierrc.base.json

@@ -0,0 +1,10 @@
+{
+	"singleQuote": false,
+	"jsxSingleQuote": true,
+	"trailingComma": "es5",
+	"tabWidth": 2,
+	"useTabs": true,
+	"semi": true,
+	"printWidth": 100,
+	"bracketSpacing": true
+}

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/setting.json

@@ -0,0 +1,22 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -1,59 +1,130 @@
-# Freedivah
-**Freedivah** is a global community platform where freedivers from around the world come together to connect, share their passion, and inspire each other. The name **Freedivah** blends 'freediving' with the name of the developer, a devoted freediving enthusiast, capturing her deep love for the sport in every detail.
-## MVP FEATURES
-### TRACK & ANALYZE
+# Freedivah: Project Overview
+**“From Dive Tracking to Social Sharing”**  
+Freedivah is an interactive platform that allows freedivers to mark and share their dive locations on a global map using national flag icons.
+
+The name 'Freedivah' combines 'freediving' with my identity as a developer, reflecting both my passion for underwater exploration and my journey.
+
+## Key Features
+
+- **Personalized Dive Map**: Pin and save your dive locations on a global map.
+- **Sharing and Connecting**: Share your dive experiences and connect with divers worldwide.
+- **Tracking and Documentation**: Log and track your dives across different countries to monitor your progress.
+
+## Documentation
+For more detailed information, refer to the following:
+- [Technology Choices Rationale, API Specification, Functional Specification, Route Design etc](https://jiah827.notion.site/Project-Freedivah-10f4ef50e633807387d4c9307d622bdb?pvs=74)
+- [Optimizing Freedivah’s Architecture with Feature-Sliced Design(FSD)](https://www.notion.so/jiah827/Optimizing-Freedivah-s-Architecture-with-Feature-Sliced-Design-1134ef50e63380b1b47bea0cc16f5f64)
+- [Managing Shared Libraries: API Strategy with Exports and Aliases](https://www.notion.so/jiah827/exports-alias-API-1434ef50e63380a3aacad6eb9b7fec3b)
+- [Why Vanilla Extract CSS?](https://www.notion.so/jiah827/CSS-1424ef50e633802ab39cec3730fe2d74)
+
+## Development Considerations
+
+### Flexible and Scalable Architecture
+   - Single-direction dependencies and modularity.
+   - Loosely coupled systems through separation and abstraction of business logic, UI, and side effects. 
+
+## Architecture
+### System Overview
+```mermaid
+graph TB
+subgraph "Frontend (Next.js)"
+Web[Web Application]
+subgraph "FSD Architecture"
+App[Application Layer]
+Pages[Pages Layer]
+Widgets[Widgets Layer]
+Entities[Entities Layer]
+Shared_FE[Shared Layer]
+end
+end
+subgraph "Backend (Express.js)"
+API[API Server]
+subgraph "API Layers"
+Routes[Routes]
+Controllers[Controllers]
+Services[Services]
+Models[Models]
+end
+end
+subgraph "Shared Package"
+Types[Types]
+Utils[Utils]
+end
+Web --> Types
+Web --> Utils
+API --> Types
+API --> Utils
+subgraph "External Services"
+Supabase[(Supabase)]
+end
+API --> Supabase
+```
+### Package Dependencies
+```mermaid
+graph TD
+A[packages/web]
+B[packages/api]
+C[packages/shared]
+A --> C
+B --> C
+style A fill:#eb6b56,stroke:#333,stroke-width:2px
+style B fill:#2196F3,stroke:#333,stroke-width:2px
+style C fill:#47b39d,stroke:#333,stroke-width:2px
+```
+### Build Flow
+```mermaid
+graph LR
+A[Build Shared] --> B[Build Web & API]
+B --> C[Run Services]
+style A fill:#47b39d,stroke:#333,stroke-width:2px
+style B fill:#2196F3,stroke:#333,stroke-width:2px
+style C fill:#eb6b56,stroke:#333,stroke-width:2px
+```
+### Package Overview
+- `@freedivah/shared`: Core utilities and types
+- `@freedivah/web`: Next.js frontend application
+- `@freedivah/api`: Express backend server
+
+## Technologies Used
+   - **Frontend**: Next.js, TypeScript, Vanilla Extract
+   - **Backend**: Node.js, Express.js, Supabase
+   - **Testing**: Jest
+   - **DevOps**: Github Actions, Docker, AWS
+
+## How to Run
+### Prerequisites
+- Node.js 18+ 
+- PNPM 9.14.1+
+
+### Installation & Development
+1. Clone the repository
+   ```
+   git clone https://github.com/f-lab-edu/Freedivah.git
+   cd Freedivah
+   ```
+2. Install dependencies
+   ```
+   pnpm install
+   ```
+3. Start development
+   ```
+   pnpm dev
+   ```
+### Testing
+   ```
+   yarn test 
+   ```
+### Build
+   ```
+   yarn build
+   ```
+
+## Design
+<img src="docs/images/Freedivah_Design.webp" alt="Freedivah Design" style="width: auto; height: 600px" />
 
-- **My Dive Map**: Mark your dive locations on a global map with flag badges. Input methods include GPS, device integration, and direct entry.
-### SHARE & CONNECT
 
-- **Profile**: Earn and showcase freediving certification badges.
-- **Export & Share**: Export and share your dive map files.
-- **Feed**:
-    - Upload and comment on photos and videos.
-    - Share your current location with a map image featuring a flag badge.
-    - Posts are automatically translated into English.
 
-## TECH STACKS
 
-#### Mono Repo / PNPM
 
-- **Mono Repo**: Manages multiple packages within a single repository, streamlining development and version control.
-- **PNPM**: Provides efficient package management with fast installation and reduced disk space usage. Chosen for its superior compatibility with widely used tools, despite Yarn Berry’s Zero-install advantages.
 
-#### Front-End Technologies
 
-- **Vanilla JavaScript** and **TypeScript**: Core languages selected to deepen our understanding of fundamental JavaScript principles.
-- **Vanilla Extract**: Used for styling and UI development. Preferred over TailwindCSS and Styled Components for its static CSS extraction, type safety, and lack of runtime overhead, enhancing performance and maintainability.
-
-#### Backend Framework
-
-- **Node.js** with **Express.js**: Manages server-side logic and API endpoints.
-
-#### Data Storage
-
-- **Firebase Realtime Database**: Handles and stores dive data and user profiles.
-
-#### Authentication
-
-- **Firebase Authentication**: Manages user authentication and profiles, seamlessly integrating with Google Authentication.
-- **Google Authentication**: Enabled through Firebase Authentication, offering a smooth and effortless login experience with Google accounts.
-
-
-## EXTERNAL APIS
-
-#### Map Integration & Visualization
-
-- **Google Maps JavaScript API**: Displays dive locations with flag badges on a map.
-
-#### Location Services
-
-- **Geolocation API**: Retrieves the user's current location for precise dive tracking.
-- **OpenCage Geocoding API**: Converts coordinates into country information. Selected for its cost-effectiveness and broad coverage compared to Google Maps Geocoding API.
-
-#### Data Export
-
-- **JSZip**: Exports dive maps and data as downloadable files.
-
-#### Flag Icons
-
-- **FlagsAPI**: Provides high-quality flag icons in SVG format with various sizes and styles.

jest.config.base.js

@@ -0,0 +1,14 @@
+module.exports = {
+	preset: 'ts-jest',
+	testEnvironment: 'node',
+	moduleNameMapper: {
+		'^@/(.*)$': '<rootDir>/src/$1',
+	},
+	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+	testMatch: ['**/__tests__/**/*.test.ts?(x)'],
+	collectCoverageFrom: [
+		'src/**/*.{ts,tsx}',
+		'!src/**/*.d.ts',
+		'!src/**/*.stories.{ts,tsx}',
+	],
+};

package.json

@@ -0,0 +1,37 @@
+{
+	"name": "freedivah",
+	"version": "1.0.0",
+	"main": "index.js",
+	"repository": "https://github.com/f-lab-edu/Freedivah.git",
+	"author": "jiaah <25231717+jiaah@users.noreply.github.com>",
+	"license": "MIT",
+	"packageManager": "pnpm@9.14.1",
+	"workspaces": [
+		"packages/*"
+	],
+	"scripts": {
+		"build": "turbo run build",
+		"dev": "turbo run dev",
+		"test": "turbo run test",
+		"test:watch:filter": "turbo run test:watch --filter=@freedivah/*#",
+		"clean": "turbo run clean && rm -rf node_modules",
+		"lint": "turbo run lint",
+		"format": "prettier --write \"**/*.{ts,tsx,md}\""
+	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "^6.6.3",
+		"@types/jest": "^29.5.14",
+		"@types/node": "^20",
+		"@typescript-eslint/eslint-plugin": "^8.14.0",
+		"@typescript-eslint/parser": "^8.14.0",
+		"eslint": "^9.15.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-typescript": "^3.6.1",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-prettier": "^5.2.1",
+		"jest": "^29.7.0",
+		"prettier": "^3.3.3",
+		"turbo": "^2.3.0",
+		"typescript": "^5"
+	}
+}