playground

https://playground.aniqa.dev

🕹️ A place to showcase a collection of independent, interactive widgets that each demonstrate a different functionality using both frontend and backend technologies.

Tech

• Frontend: HTML5, Tailwind, Sass, JavaScript
• Backend: Node, Express, MongoDB, Mongoose

Hosts

• Frontend: Vercel
• Backend: Heroku
• Database: MongoDB Atlas

Build Tools

• Bundling & Optimization: Webpack
• Tailwind Processing: PostCSS
• Linter: ESLint
• Formatter: Prettier

Project Files

playground/
├── client/                 # Client-side code
│   ├── public/             # Public assets
│   ├── src/                # Source code for the client
│   │   ├── main/           # Main client-side scripts and styles (relating to theme mode, styling, like system, user handling, etc)
│   │   ├── widgets/        # Client-side logic for individual widgets
│   │   │   ├── 01/         # Widget 01 (About)
│   │   │   ├── 02/         # Widget 02 (Calculator)
│   │   │   ├── 03/         # Widget 03 (Digital Footprint)
│   │   │   ├── 04/         # Widget 04 (Task Manager)
│   │   │   ├── 05/         # Widget 05 (Financial Market Monitor)
│   │   │   ├── 06/         # Widget 06 (Historical Lottery Search)
│   │   │   ├── 07/         # Widget 07 (GitHub Repository Visualizer)
│   │   │   ├── 08/         # Widget 08 (Community Bookmarks)
│   │   │   │    │          # Example structure of individual widget folders:
│   │   │   │    ├── core/  
│   │   │   │    ├── content.js
│   │   │   │    ├── script.js
│   │   │   │    ├── style.scss
│   │   │   
│   │   ├── _border.html    # Template for animated borders (only used on Widget 01)
│   │   ├── _card.html      # Template for the widget container
│   │
│   ├── .env                # Environment variables for the client-side
│   ├── .env.development    # Environment-specific variables for development mode in the client-side
│   ├── .eslintrc.js        # ESLint configuration for linting client-side JavaScript
│   ├── .prettierrc         # Prettier configuration for formatting client-side code
│   ├── postcss.config.js   # PostCSS configuration for CSS processing
│   ├── tailwind.config.js  # Tailwind CSS configuration
│   ├── webpack.config.js   # Webpack configuration 
│   ├── package.json        # Metadata and scripts for the client-side
│   ├── package-lock.json   # Exact dependency versions for the client-side
│
├── docs/                   # Documentation files for the project
│
├── server/                 # Server-side code
│   ├── main/               # Main server-side logic (handling users and widget likes)
│   ├── widgets/            # Server-side logic for individual widgets
│   │   ├── 03/             # Widget 03 (Digital Footprint)
│   │   ├── 04/             # Widget 04 (Task Manager)
│   │   ├── 05/             # Widget 05 (Financial Market Monitor)
│   │   ├── 06/             # Widget 06 (Historical Lottery Search)
│   │   ├── 07/             # Widget 07 (GitHub Repository Visualizer)
│   │   ├── 08/             # Widget 08 (Community Bookmarks)
│   ├── _modelTemplate.js   # Template for server-side data models 
│
├── .env                    # Environment variables for the server
├── .eslintrc.js            # ESLint configuration for the server-side
├── .gitignore              # Git ignore file to exclude certain files from version control
├── .prettierignore         # Prettier ignore file to exclude certain files from formatting
├── .prettierrc             # Prettier configuration for the server-side
├── package.json            # Metadata and scripts for the server-side
├── package-lock.json       # Exact dependency versions for the server-side
├── Procfile                # Process file for Heroku deployment
├── server.js               # Entry point for the server-side application
│
├── LICENSE                 # License for the project
├── README.md               # Project README (contains notes/screenshots about the widgets, structure, and more)

Webpack configuration for client-side code (client/webpack.config.js):

• processes SCSS and PostCSS
• bundles modular JavaScript
• minifies CSS and JavaScript
• configures HTML (meta tags, icons)
• loads environment variables from .env
• manages manifest.json for PWA support
• optimizes images and saves them in assets/images with hashed filenames
• splits JavaScript into chunks for better performance
• outputs hashed filenames for JS and CSS to enable caching

Individual Widgets

Widget 01: About (README)

A card showcasing the purpose of the webpage with animated SVG logos of the technologies used, a GitHub activity grid of the creator, and links to source code and social media.

Widget 02: Calculator (README)

A dual-mode calculator that can handle evaluating different arithmetic expressions and provides the ability to graph select functions, accessed through a minimalistic user interface. The calculator allows users to keep track of their previously inputted expressions and allows them to save a .png file of the calculator's display and history.

Widget 03: Digital Footprint (README)

A mini dashboard that presents a user's digital footprint, including geographic location (obtained using their IP), browser details, operating system, and ISP information, all underscored by a dynamic map visualization for a quick and elegant overview of their online presence.

Widget 04: Task Tracker (README)

A user-friendly to-do list widget that lets users manage tasks with priority tags, due dates, and quick actions like edit, delay, archive, or delete.

Widget 05: Financial Markets Monitor (README)

A financial markets widget that delivers real-time currency exchange rates against USD and stock market data through interactive 7-day price history graphs, color-coded trend indicators, and detailed metrics for market monitoring.

Widget 06: Historical Lottery Search (README)

A lottery analysis tool that helps players analyze historical Powerball and Mega Millions drawings, featuring quick number generation, detailed match statistics, and visual indicators to easily spot winning combinations - all searchable across 20+ years of drawing history.

Widget 07: GitHub Repository Search (README)

A GitHub repository visualization tool that generates cards displaying repository statistics and language breakdowns. Features include random repository discovery, search functionality, and PNG export capabilities.

Widget 08: Community Bookmarks (README)

A community-driven bookmark platform that processes submitted URLs to extract metadata, validate content safety, and generate topic tags. Features include community voting, automated metadata extraction, and content filtering to maintain a curated collection of high-quality web resources.

Available Scripts

Server-Side Development (Root / Directory)

• npm run start:dev: starts the backend server and sets NODE_ENV variable to development (sets a different CORS origin so that requests can be made from the frontend development localhost)
• npm run start: starts the backend server, used for production; sets NODE_ENV variable to production (sets a different CORS origin so that requests can be made from the hosted frontend)
• npm run lint:server: check for code errors based on the .eslintrc.js config file
• npm run lint:server:fix: automatically fix minor syntax errors identified by ESLint
• npm run format:server: format the server-side code based on the .prettierrc config file

Client-Side Development (/client Directory):

• npm run start: starts the development server with NODE_ENV variable set to development
• npm run build: builds frontend for production with NODE_ENV variable set to production
• npm run lint: check for code errors based on the .eslintrc.js config file
• npm run lint:fix: automatically fix minor syntax errors identified by ESLint
• npm run format: format client-side code based on the .prettierrc config file

License & Contributions

📑 This project is licensed under the GPL-3.0.

👋🏼 Contributions for new widgets are always welcome.