📈 Alice Stock Community

A Stock Community App for NestJS Learning & Tutorial Materials

This project was created as educational material for NestJS backend development course. It demonstrates modern web development practices with a Toss-inspired UI and real-time stock community features.

🎯 Project Overview

Alice Stock Community is a modern stock discussion platform inspired by popular fintech apps like Toss. Users can view real-time stock prices, charts, and participate in community discussions with automatic sentiment analysis.

📚 Educational Purpose: This repository serves as comprehensive learning material for NestJS backend development, covering API design, data validation, real-time updates, and modern TypeScript patterns.

✨ Features

📊 Stock Information

• Real-time stock price simulation (ALICE CORP)
• Interactive price charts with Canvas API
• NVIDIA-style bullish trend simulation
• Live market statistics and trading volume

💬 Smart Community

• Real-time message posting and updates
• Automatic sentiment analysis (bullish/bearish detection)
• Live notifications for new community posts
• Keyword-based mood indicators (📈 bullish, 📉 bearish)

🎨 Modern UI/UX

• Toss-inspired design system
• Clean white-based interface
• Fully responsive mobile-first design
• Smooth animations and micro-interactions

⚡ Technical Stack

Frontend

• Vanilla JavaScript with modern ES6+ features
• HTML5 Canvas for stock chart visualization
• CSS3 with custom properties and modern layouts
• Responsive Design with mobile-optimized breakpoints

Backend (NestJS)

• NestJS Framework with TypeScript
• REST API with proper HTTP methods
• Data Validation using class-validator
• In-memory storage (ready for database integration)
• Sentiment Analysis with keyword detection
• CORS enabled for frontend integration

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation & Setup

1. Clone the repository

   git clone <your-repository-url>
   cd alice-stock-community

2. Backend Setup

   cd backend
   npm install
   npm run start:dev

   Backend will run on http://localhost:3000

3. Frontend Setup

   cd frontend
   # Simply open index.html in your browser
   # or use a local server:
   npx serve .

🔧 API Endpoints

Method	Endpoint	Description
GET	/messages	Fetch all community messages
POST	/messages	Create a new community message

📝 Request/Response Examples

POST /messages

{
  "nickname": "InvestorJoe",
  "text": "ALICE 주가 상승 예상! 🚀"
}

Response

{
  "id": "1691234567890abc",
  "nickname": "InvestorJoe",
  "text": "ALICE 주가 상승 예상! 🚀",
  "sentiment": "bullish",
  "createdAt": "2024-08-10T15:30:00.000Z"
}

📚 Learning Objectives

This project covers essential NestJS concepts:

🎓 Backend Development

• Project Structure - Understanding NestJS modular architecture
• Controllers - Handling HTTP requests and responses
• Services - Business logic separation and dependency injection
• DTOs - Data validation and transformation
• Modules - Feature-based code organization
• Middleware - CORS, validation pipes, and error handling

🛠 Advanced Topics (Ready for Extension)

• Database Integration - TypeORM or Prisma setup
• Authentication - JWT and user management
• Real-time Features - WebSocket implementation
• External APIs - Stock data integration
• Testing - Unit and integration tests
• Deployment - Docker and cloud deployment

🔨 Project Structure

alice-stock-community/
├── frontend/                 # Frontend application
│   ├── index.html           # Main HTML file
│   ├── style.css            # Toss-inspired styles
│   └── script.js            # Stock app logic
├── backend/                 # NestJS backend
│   ├── src/
│   │   ├── main.ts          # Application entry point
│   │   ├── app.module.ts    # Root module
│   │   └── messages/        # Messages feature module
│   │       ├── messages.module.ts
│   │       ├── messages.controller.ts
│   │       ├── messages.service.ts
│   │       └── create-message.dto.ts
│   ├── package.json
│   └── tsconfig.json
└── README.md

🎯 Key Features Explanation

💡 Sentiment Analysis

The app automatically detects bullish/bearish sentiment using keyword matching:

• Bullish keywords: "상승", "오른다", "매수", "🚀", "📈"
• Bearish keywords: "하락", "떨어", "매도", "📉", "💸"

📈 Stock Price Simulation

• 70% chance of small gains (+0.2% ~ +1.7%)
• 5% chance of big rallies (+2% ~ +8%)
• 20% chance of sideways movement (±0.2%)
• 5% chance of minor corrections (-0.8%)

🚀 Future Enhancements

• Database integration (PostgreSQL/MongoDB)
• Real stock API integration
• User authentication system
• WebSocket for real-time updates
• Advanced sentiment analysis with AI
• Mobile app development
• Automated testing suite

🤝 Contributing

This is an educational project. Feel free to fork, experiment, and submit pull requests with improvements!

📄 License

This project is created for educational purposes. Feel free to use it for learning and teaching NestJS development.

🙏 Acknowledgments

• Inspired by Toss and other modern fintech applications
• Built with ❤️ for NestJS learning community
• Special thanks to the NestJS team for the amazing framework

---

Happy Coding! 🚀

This project demonstrates that learning backend development can be both practical and fun. Dive into the code, experiment with new features, and build your NestJS expertise!