project-wespark

WeSpark: A Full-Stack Learning & Opportunity Dashboard

Project Overview:

WeSpark is a comprehensive full-stack application developed to demonstrate capabilities in modern software development practices and technologies. Conceived as a “Learning & Opportunity Dashboard,” its primary goal is to showcase the creation of a system that collects, processes, and presents data relevant to identifying and fostering opportunities for growth and prosperity.

The system architecture comprises three interconnected components:

.NET MAUI Mobile Application: A cross-platform mobile client enabling data input (e.g., ratings, textual feedback) related to learning experiences or opportunities.
Node.js & Express Backend API: A RESTful API service responsible for receiving and persisting data submitted via the mobile application. Initial data storage is managed via a JSON file, with documented considerations for scalable cloud-based data solutions.
Angular Web Dashboard: A single-page application (SPA) serving as an administrative and analytical interface. It allows for the visualization, searching, and interpretation of collected data, providing insights into potential areas for improvement or success.

This project highlights proficiency in full-stack development, modern mobile application architecture (as an evolution of Xamarin principles), and an understanding of cloud deployment strategies.

🚀 Technologies & Tool Stack

The WeSpark project leverages a robust and contemporary technology stack:

1. Backend Service: * Runtime/Language: Node.js (v18.x or specified version) with JavaScript (ES6+) * Framework: Express.js (~4.18.x or specified version) * Data Persistence (Initial): Local JSON file, managed via Node.js fs module. * Package Manager: npm (v9.x or specified version)

2. Mobile Application: * Framework: .NET MAUI (Multi-platform App UI) * Based on: .NET 7 (or specified .NET version) * Language: C# * User Interface: XAML * Key Architectural Concept: Illustrates a contemporary approach to cross-platform native application development, succeeding Xamarin.Forms and enabling a single C# codebase for multiple targets.

3. Web Dashboard (Frontend SPA): * Framework: Angular (v16.x or specified version) * Language: TypeScript (~5.1.x or specified version) * Core Technologies: HTML5, CSS3 (Optionally Angular Material v16.x for UI components) * Data Interaction: Angular HttpClientModule for API communication. * Package Manager: npm (v9.x or specified version), managed via Angular CLI.

4. Version Control & Collaboration: * System: Git * Hosting Platform: GitHub

5. Development Environments: * Primary IDEs: Visual Studio Code (for Node.js/Angular, primarily within WSL Ubuntu 22.04 LTS or specified version), Visual Studio 2022 (for .NET MAUI). * Operating System Flexibility: The project supports development across Windows, macOS, and Linux, with this instance utilizing WSL for Linux-based development of backend/frontend components alongside Windows for .NET MAUI.

6. Cloud Architecture Considerations (Backend Deployment Strategy): The backend API is designed with scalability and cloud-native deployment in mind. A production deployment strategy would consider the following AWS services: * Compute Options: * AWS Lambda: For serverless function execution, suitable for event-driven API endpoints. * Amazon Elastic Beanstalk: For managed deployment of the Node.js application. * Amazon EC2: For direct virtual machine instances, offering granular control. * API Management: * Amazon API Gateway: To manage, secure, and expose API endpoints for Lambda, Beanstalk, or EC2. * Scalable Data Storage: * Amazon DynamoDB: A NoSQL database service for high-performance, scalable data storage. * Amazon S3: For object storage, potentially for the JSON data file or associated assets. * Amazon RDS: For relational database needs, if data complexity increases. * Security & Access Control: * AWS IAM (Identity and Access Management): For fine-grained control over access to AWS resources. * Amazon VPC & Security Groups: For network isolation and traffic filtering.

📂 Project Structure (Monorepo)

The project is organized as a monorepo for streamlined management:

wespark/
├── backend/                  # Node.js Express API
│   ├── src/
│   │   └── server.js
│   ├── feedback.json         # (Example data store)
│   ├── package.json
│   └── README.md
├── mobile-app/               # .NET MAUI Application
│   ├── WeSparkApp/           # MAUI Project Source
│   │   └── ...
│   └── README.md
├── web-dashboard/            # Angular Web Application
│   ├── src/
│   │   └── ...
│   ├── angular.json
│   ├── package.json
│   └── README.md
├── .gitignore
└── README.md                 # Main project README (this file)

(Sub-directories will contain their own node_modules/ or bin/obj/ folders, which are typically gitignored.)

⚙️ Setup and Execution

Detailed setup and execution instructions for each component are available in their respective README files:

General Prerequisites:

Git
Node.js & npm (refer to versions in “Technologies & Tool Stack”)
.NET SDK (refer to .NET MAUI version)
Angular CLI (npm install -g @angular/cli@<version>)
Relevant IDEs (Visual Studio Code, Visual Studio 2022)

Brief Execution Overview:

Backend API: Navigate to backend/, run npm install, then npm start. Typically available at http://192.168.0.152:3000.
Mobile App: Open mobile-app/WeSparkApp/WeSparkApp.csproj in Visual Studio. Ensure .NET MAUI workloads are installed. Configure the API endpoint within the app to point to the running backend. Build and deploy to the desired target (emulator/device).
Web Dashboard: Navigate to web-dashboard/, run npm install, then ng serve. Typically available at http://localhost:4200. Ensure the Angular service is configured to use the backend API URL.

✨ Alignment with Technical Proficiencies

The “WeSpark” project is designed to demonstrate practical application of skills relevant to full-stack development roles:

Full-Stack Development: Exhibits the capacity to design, develop, and integrate components across the mobile client, backend API, and web frontend.
Technology Proficiency: Directly employs Node.js, JavaScript, Angular, HTML, CSS, C#, and .NET.
.NET MAUI for Cross-Platform Mobile: Leverages .NET MAUI to showcase modern C#-based mobile development, illustrating an understanding of concepts evolving from the Xamarin ecosystem.
Cloud Architecture Acumen (AWS): Articulates a strategic approach to deploying the backend service on AWS, demonstrating familiarity with cloud services and architectures relevant to scalable solutions.
Development Tools & Practices: Utilizes industry-standard tools such as Git, Visual Studio, and VS Code, and follows common development workflows within varied operating system environments (Linux via WSL, Windows).
Data Handling & UI: Implements features like data submission, storage, retrieval, and client-side search functionality within the web dashboard, showcasing practical application development.

💡 Potential Future Development

While the current version serves as a comprehensive demonstration, potential areas for future enhancement include:

Implementation of user authentication and authorization.
Advanced data visualization features in the Angular dashboard (e.g., dynamic charts, reporting).
Transitioning backend data storage to a cloud database solution (e.g., DynamoDB).
Full CI/CD pipeline setup for automated testing and deployment.
Live deployment of the backend API and frontend dashboard to cloud platforms.

License

LICENSE

This README is intended to provide a clear and concise overview of the WeSpark project, its technical underpinnings, and its relevance to demonstrating key software development competencies.

This site is open source. Improve this page.