Forem: Cheryl M

Chingu.io: Build, Collaborate, Learn: Remote Projects V59 Showcase

Cheryl M — Sat, 14 Mar 2026 11:27:42 +0000

Celebrating the successful completion of a six-week journey from January 12th to February 22nd, 2026, we are thrilled to showcase the remarkable achievements of our Voyage 59 teams. During this voyage, developers globally collaborated remotely, putting their technical skills to the test and honing their soft skills like teamwork, collaboration, and project management. They embraced new methodologies like Agile and Scrum, driving innovation across diverse projects. This voyage was a testament to the power of commitment and collaboration, producing incredible apps and solidifying the path toward landing dream jobs. Congratulations to every team member for their dedication and success!

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

InterviewFlow

InterviewFlow is a full-featured interview preparation platform that helps users practice role-specific technical interview questions with real-time AI-powered guidance.

Tech-Stack: React, Vite, Tailwind, Google Gemini API, Vitest

Chingu project type: Tier 2

Developers: lawrence6142, pietrols.
Scrum Master: mide02.

Deployed app
GitHub

Quizest

Quizest is an interview preparation app to assist aspiring tech professionals improve their interview preparedness by answering multiple choice or open ended questions and receiving scores, amplifying information or qualitative feedback.

Tech-Stack: React, TypeScript, Tailwind CSS, React Router, Vite, Supabase, Google Gemini Flash, Netlify

Chingu project type: Tier 2

Developers: matthewneie_03831, u4.j, bhoyem, emilylime1204
Scrum Master: memebomber3000

Deployed app
GitHub

NexLink

A platform that helps students and early-career professionals track their internship and job applications.

Tech-Stack: Next.js, TypeScript, Node.js, Neon, Prisma, Clerk and Vercel

Chingu project type: Tier 3

Developers: jeru07, chrysostomo, pat.dev.
Scrum Master: __daniel25

Deployed app
GitHub

Confido

Confido helps product owners, scrum masters, designers and developers build confidence through focused practice on role-based questions decks.

Tech-Stack: node.js/typescript, next.js FE, express BE, drizzle+postgres

Chingu project type: Tier 3

Developers: maki_keep, _absterr, tigeryash
UI/UX Designers: som4h, yakboon_j
Product Owner: amandaaco
Scrum Master: michael039179

Deployed app
GitHub

Interview Question Generator

This application provides an interview preparation experience that allows users to practice technical and non-technical interview questions in a session-based format.

Tech-Stack: React, Tailwind CSS, NodeJS, Express, MongoDB

Chingu project type: Tier 3

Developers: klari7292, Stanley Eze#3351, ryviance, shrureddy, minezzig
Scrum Master: yangs8977

Deployed app
GitHub

SkillPath

SkillPath a flashcard application built to generate high-quality interview questions that enable tech geeks including (Full-stack developers, UX/UI and Scrum Masters) to pass their next interviews.

Tech-Stack: NextJS, TypeScript, Firebase and Supabase

Chingu project type: Tier 3

Developers: maheswarikumar5, bisisina_26949, natalie05514, Fouad#1791
UI/UX Designer: josewski

Deployed app
GitHub

Interview Practice App

Interview Practice App

Tech-Stack: React, TypeScript, Django

Chingu project type: Tier 3

Developers: seiya2323, ben_aguilar, katiaku, th3ja_
UI/UX Designer: joekotvas
Scrum Master: valpolarbear

Deployed app
GitHub

Chingu.io: Build, Collaborate, Learn: Remote Projects V58 Showcase

Cheryl M — Wed, 31 Dec 2025 05:27:17 +0000

Celebrating the successful completion of a dynamic six-week journey from November 3rd to December 14th, 2025, we proudly spotlight the exceptional achievements of our Voyage 58 teams. Throughout this voyage, developers around the globe united to innovate, collaborate, and elevate their skills—transforming ideas into impactful applications. Participants not only honed technical expertise but also enhanced their teamwork and project management abilities, embracing Agile methodologies. Let’s applaud these dedicated teams for their creativity and commitment, making Voyage 58 an inspiring chapter in our tech community!

Tier 1 - HTML - Basic Javascript - Basic Algorithms (LANDING PAGES)

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

Project-chingu-map

It is a full stack project which enables us to see chingu resistered learners across the globe.

Tech-Stack: React, Prisma, Neon, Noe.js, Express.js

Chingu project type: Tier 1

Developers: fame2024, anas.el, bleezebubb.

Demo
Deployed app
GitHub

ChinguDemo

ChinguDemo allows users to view details of past Chingu participations, including voyager role, voyage tier, and year. In addition, an interactive map displays distribution of Chingus across the world.

Tech-Stack: React, Vite, Tailwind, Firebase, MapBox, Storybook

Chingu project type: Tier 2

Developers: bastien_winant, lillat0261
Product Owner: amandaaco
Scrum Master: chartgod

Deployed app
GitHub

Chingu Map

A map and list app displaying Chingu member data around the world.

Tech-Stack: TypeScript, Next JS, PostgreSQL, Prisma, Supabase, Mapbox

Chingu project type: Tier 3

Developer: meuzishun
UI/UX Designers: mwu28, yoohan55555

Deployed app
GitHub

Safestep

This project is a React Native mobile application built with Expo for individuals in substance abuse recovery. Users can sign up as recoverers, voluntarily opt in to location sharing, and link their sponsors within the app. Using location tracking and geofencing, the app sends push notifications when a recoverer enters a high-risk location, providing timely support and accountability.

Tech-Stack: Typescript, React Native, Expo, Supabase, Nativewind/Tailwind, Gluestack UI, Android Studio, Docker Desktop

Chingu project type: Tier 3

Developers: captainquint0550, Fouad#1791, natig25
UI/UX Designer: wwwww__55555
Product Owner: xonda_cc
Scrum Master: __daniel25

Deployed app
GitHub

ChinguVerse

The Chingu Member Demographics Map is a web application that displays demographic information about Chingu members across the world. It helps users explore where Chingus live, their roles, tiers, and other attributes all shown visually on an interactive world map and in a searchable list view.

Tech-Stack: Next.js, React, TypeScript, React Leaflet, Tailwind CSS, Lucide React, Prisma, REST API with Next.js Route Handlers, Google GenAI - gemini 2.5 flash, Firebase Authentication

Chingu project type: Tier 3

Developers: iexyzt, bisisina_26949, akotobopeep
Scrum Master: cashlady4852

Demo
Deployed app
GitHub

Gig Marketplace App

A platform to connect Freelancers and Vendors to exchange value and get paid.

Tech-Stack: node.js

Chingu project type: Tier 3

Developers: asil_76328, anthonator, snowbytes
Product Owner: dhemmyhardy
Scrum Master: adewale_agboke

Deployed app
GitHub

ChinguVerse

An interactive Demography Map of Chingus

Tech-Stack: NodeJs, Typsecript, Express, ReactJs, MongoDb, ChakraUI & LeafletJs

Chingu project type: Tier 3

Developers: don_kachi, afuwape_babatunde, budreckless
Scrum Masters: zuali16, mide02.

Deployed app
GitHub

Chingu Demographics

Chingu Demographics App helps users explore Chingu community data through interactive maps and lists. You can search and filter members by country, role, voyage, and other demographics. The app visualizes where Chingus are located and how the community is distributed globally. It also includes an AI assistant to guide users through features and insights.

Tech-Stack: React, Next JS, Express, MongoDB

Chingu project type: Tier 3

Developers: datchmonsieur_08629, shrureddy, rico_128
Scrum Master: meryem.yusuf

Demo
Deployed app
GitHub

Chingu Demographics

Chingu Dempgraphics displays non-identifying for Chingus. You can view the data in a table or map. You can search, sort, and filter results.

Tech-Stack: React, Typescript, Tailwind, Express, Netlify, GitHub

Chingu project type: Tier 3

Developers: matthewneie_03831, thedevguy578
Scrum Masters: yangs8977, memebomber3000

Deployed app
GitHub

Chingu.io: Build, Collaborate, Learn: Remote Projects V57 Showcase

Cheryl M — Wed, 22 Oct 2025 11:00:37 +0000

Celebrating the successful completion of an exhilarating six-week journey from September 1st to October 12th, 2025, we proudly showcase the remarkable projects of our Voyage 57 teams. Developers and contributors from across the globe united virtually, leveraging their technical prowess while honing vital soft skills like teamwork, collaboration, and project management. Throughout this voyage, participants committed to building impressive apps, guided by Agile and Scrum methodologies, and supported by designers, scrum masters, and product managers. Voyage 57 stands as a testament to the power of dedicated teamwork and innovative problem-solving. Congratulations to all involved in making this voyage unforgettable!

Tier 1 - HTML - Basic Javascript - Basic Algorithms (LANDING PAGES)

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

Review Board

The Review Board is a web application that connects to the GitHub API to display and track a team’s open and closed Pull Requests. It helps teams monitor review progress, view PR details, and improve collaboration efficiency.

Tech-Stack: React

Chingu project type: Tier 1

Developers: anas.el, serlehjr

Deployed app
GitHub

PR Request Tracker

This website allows you to save and track your open and closed PR requests. No authentication needed

Tech-Stack: React

Chingu project type: Tier 1

Developers: nikola_05339, eleazer_abbey, .xsoldier96._23798

Demo
Deployed app
GitHub

Pull Request Dashboard

A modern and responsive dashboard for tracking your GitHub Pull requests.

Tech-Stack: React, Vite, Octokit, TailwindCSS

Chingu project type: Tier 1

Developers: nikoonasrpooya, gursimran0448_77440, corduka35, travelcurator83
Voyage Guide: lkallen87

Demo
Deployed app
GitHub

GitHub PR Review Status

Application that help team track the status of open Pull Requests in GitHub and closed (historical) ones in GitHub

Tech-Stack: React.js + Vite, React Router, Tailwind CSS, Cloudflare Workers, Solar Icons

Chingu project type: Tier 2

Developers: ouassima0923, florensi, alex_mv_, e_josh
UI/UX Designer: h_youka
Product Owner: kenako0127

Deployed app
GitHub

Tier 2 Team 21

This project tracks statuses of branches within a github project. The app consist of a dashboard tracking branches that are created, in progress, and completed etc.

Tech-Stack: NextJS and Tailwind CSS

Chingu project type: Tier 2

Developer: .ericac
Voyage Guide: Robester#5442

Deployed app
GitHub

PR Tracker

A web application to track current PR's waiting review as well as the history of PR's completed by the team

Tech-Stack: React, Typescript, Tailwind, Jira, Vercel, Render

Chingu project type: Tier 2

Developers: ryviance, wormpoo, matthewneie_03831
Product Owner: viral2287
Scrum Master: thaisaya
Voyage Guide: valpolarbear

Deployed app
GitHub

PR Status Board

This project is similar to GitHub where users can search for and view their repositories.

Tech-Stack: I believe we used React and Nose.js

Chingu project type: Tier 2

Developers: zephyr_koryami, teslapill, fcuevas6
UI/UX Designers: prettypinkdesigns, omda_81028

Deployed app
GitHub

MergeBoard

MergeBoard is a collaborative tool used by my team to track and view information about all Pull Requests in our team repo.

Tech-Stack: MongoDB, zod, Zustand, node.js

Chingu project type: Tier 3

Developers: Feyra#8759, bisisina_26949, Fouad#1791
Product Owner: xonda_cc

Deployed app
GitHub

PR Status Review Board

This web application helps development teams track their GitHub PRs.

Tech-Stack: Languages: Typescript Frontend: React, Shadcn/UI, Tailwind. Backend: Node.js, Express.js Infra: Docker, Github Actions

Chingu project type: Tier 3

Developers: budreckless, acto_acto, devim, thedevguy578
UI/UX Designer: BettyC
Product Owner: brb

Demo
Deployed app
GitHub

Pull Board

This project aims to monitor open GitHub pull requests and review those that have been closed.

Tech-Stack: NodeJS, ExpressJS, Firebase, React

Chingu project type: Tier 3

Developers: anthonator, klari7292, .barristanselmy, na._.axh
UI/UX Designer: josewski

Deployed app
GitHub

E-Voting Platform

Its a platform where voters make their vote choices known by voting online.

Tech-Stack: React, Vite, Express, Typescript and Postgres

Chingu project type: Tier 3

Developers: don_kachi, afuwape_babatunde, hassanabbas7663, az_kosiso3219
Product Owner: dhemmyhardy
Scrum Master: mrpebbles4359

Deployed app
GitHub

MergeForce

MergeForce is a GitHub pull requests dashboard that features selecting repos the user is interested in, displaying the pull requests in a list, and showing some statistics about the pull requests.

Tech-Stack: NextJS with TypeScript. Tailwind and DaisyUI, PostgreSQL and DrizzleORM, Playwright, Vercel and Neon.

Chingu project type: Tier 3

Developers: sattyikkundu, deast#7374, hynwkm

Demo
Deployed app
GitHub

PR Status Board

A full-stack website that helps you monitor open and closed GitHub PRs with real-time status updates and intelligent caching. Built with Next.js, typescript and tailwind CSS.

Tech-Stack: Next.js, typescript and tailwind CSS.

Chingu project type: Tier 3

Developers: msrissaxo, trevor8003, munky_quack, blueworld_01
Voyage Guide: esd_

Deployed app
GitHub

PRTrackr

PRTrackr is a web application designed to help development teams efficiently track, review, and manage their GitHub Pull Requests (PRs).

Tech-Stack: Next.js, react, typescript

Chingu project type: Tier 3

Developers: vorleak_58323, kento8146
UI/UX Designer: moogle_moxie0018
Product Owner: xoch5736

Deployed app
GitHub

The Animal Shelter App

The website is about the benefits of adopting an animal.

Tech-Stack: React, Node.js, Express.js, TypeScript, PostgreSQL

Chingu project type: Tier 3

Developers: aigul2601, ben_aguilar, katiaku, tay_rika, alytavaress
UI/UX Designer: .mingshiii
Scrum Master: valpolarbear

Deployed app
GitHub

Chingu.io: Build, Collaborate, Learn: Remote Projects V56 Showcase

Cheryl M — Wed, 03 Sep 2025 13:42:05 +0000

Celebrating the successful completion of a transformative six-week journey from July 7th to August 17th, 2025, we proudly highlight the extraordinary achievements of our Voyage 56 teams. Developers, designers, scrum masters, and product managers united from across the globe to create innovative apps that pushed the boundaries of collaboration and creativity. Participants not only put their technical expertise to the test but also nurtured essential soft skills, embodying teamwork, accountability, and agile methodologies. Here’s to every team member who took this opportunity to grow, connect, and craft remarkable projects. Congratulations on making Voyage 56 an unforgettable success!

Tier 1 - HTML - Basic Javascript - Basic Algorithms (LANDING PAGES)

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

Surgery Status Board

The Surgery Status Board is a web application built with React and Vite to help hospitals, surgical teams, and loved ones track the real-time status of surgeries. It provides a central hub where admins can add and update patient information, surgical team members can update patient statuses, and families can get updates on their loved ones.

Tech-Stack: React, Vite, React Router, Tailwind CSS, Javascript, HTML

Chingu project type: Tier 1

Developers: vangi2716, abutler911#1807, fcuevas6, shaymellow, doctor_condor

Deployed app
GitHub

Surgery Status Board

The Surgery Status Board is a frontend web application designed to help surgical center staff track patients and allow families in waiting rooms to monitor the progress of their loved one’s surgery in real time.

Tech-Stack: React.js, React Router, TailwindCSS, Swiper.js, LocalStorage

Chingu project type: Tier 1

Developers: e_josh, ouassima0923

Deployed app
GitHub

SurgiTrack

comprehensive patient status tracking system designed to reduce anxiety for families waiting during medical procedures

Tech-Stack: JS - React - Tailwind

Chingu project type: Tier 1

Developers: libe_jim, Mostafa_Elmoalem, haupt4

Deployed app
GitHub

Surgery Status Board (Team 21)

A modern web application that allows surgery center personnel to collect patient information and track the progress of their surgery. This will be displayed in the surgical waiting room so loved ones can track patient progress.

Tech-Stack: React 19, TypeScript, Vite , Tailwind CSS, shadcn/ui

Chingu project type: Tier 2

Developers: tulsishukla2007, elva_0329_62519
Voyage Guide: valpolarbear

Deployed app
GitHub

surgerystatus

Surgical Status Board is a web app for real-time tracking of surgical patients, with role-based access

Tech-Stack: React vite

Chingu project type: Tier 2

Developers: rachel_tipton_dev, excallibur007, .barristanselmy, avtarsinghuk

Deployed app
GitHub

The Live Orbit

Live Orbit: Patient Progress Tracking Keeping families, loved ones informed and surgical teams coordinated with real-time patient progress tracking.

Tech-Stack: Next JS, React, Typescript, Kelvin CSS, Zustand, Luicide React, MONGODB,

Chingu project type: Tier 2

Developers: shubhambn, anthonator, 12baby.

Deployed app
GitHub

Beacon

The Surgery Status Board is a web application that provides real-time updates on patient surgery progress, helping hospital staff and families stay informed and aligned throughout the surgical process.

Tech-Stack: This project follows a typical MERN stack setup: MongoDB – Database The database for the live website is hosted on MongoDB Atlas Express – Back-end framework React (with Vite) – Front-end library + build tool Node.js – runs the Express server

Chingu project type: Tier 2

Developers: hynwkm, claire_024, christinekim_
UI/UX Designers: khushali_84393, gcfvar
Product Owner: viral2287
Scrum Master: mikalafranks
Voyage Guide: andresc1310

Deployed app
GitHub

Surgery Status Board

Surgery Status Board is a web application that tracks patients' surgery progress and displays it on a monitor in the waiting room, as well as on a mobile device.

Tech-Stack: Discord, Jira, Figma, Github, React, JavaScript, Tailwind, Vercel Firebase,

Chingu project type: Tier 2

Developers: matthewneie_03831, omaramo, dylanzimmer, ben_aguilar
UI/UX Designers: .mingshiii, nidhi6268
Scrum Master: global_archer_07017
Voyage Guide: valpolarbear

Deployed app
GitHub

Surgery Status Board (Team 31)

A web platform for real-time surgical status tracking.

Tech-Stack: Next.js, TypeScript, Node.js, Express.js, MongoDB

Chingu project type: Tier 3

Developers: c.est_sa, vinhqua
Scrum Master: udaysiddapur

Deployed app
GitHub

SurgeVenger

SurgeVenger is a solution for hospitals whose seek to ensure family members always know the surgery status of their loved ones.

Tech-Stack: Typescript, React, MongoDb Atlas, ExpressJs, TailwindCSS, Gemini API, Clerk

Chingu project type: Tier 3

Developers: datchmonsieur_08629, theawin, riedulys, stem_36814
Scrum Master: mrpebbles4359

Deployed app
GitHub

WeCare

a platform for experts to market themselves to potential clients, and get their contact information.

Tech-Stack: css modules, React, Node.JS, Express, postgresql

Chingu project type: Tier 3

Developer: thedevguy578
Product Owner: prakshh
Scrum Masters: tobby6488, oawoniyi

Deployed app
GitHub

Surgence

Surgence is a patient management system designed to assist administrators in managing patient records efficiently.

Tech-Stack: NEXTjs| FastAPI | Postgres | TailwindCSS

Chingu project type: Tier 3

Developers: tomdu3, fromlani

Deployed app
GitHub

SurgiTrack

SurgiTrack helps keep families connected during surgical procedures with real-time updates and peace of mind.

Tech-Stack: React, Tailwind, Express, Node.js, PostGres

Chingu project type: Tier 3

Developers: blueworld_01, dela88_, msrissaxo, angie_02295
Voyage Guide: lkallen87

Demo
Deployed app
GitHub

Care Flow

Care Flow is an application that is used to connect patients with their loved ones, it keeps their loved ones in touch with their current situation in the operating room thereby reducing anxiety and worry.

Tech-Stack: React, Firebase, Tailwind, Next.js

Chingu project type: Tier 3

Developers: vbpolar0, cristianscript
UI/UX Designer: moogle_moxie0018
Scrum Masters: xonda_cc, dorenest

Deployed app
GitHub

Surgery Status Board

This app allows both providers and guests to track the status of a patient's surgery.

Tech-Stack: Node.js

Chingu project type: Tier 3

Developers: bellhwi, siki3948, lisch1
Voyage Guide: valpolarbear

Deployed app
GitHub

Animal World

Animal World is a full-stack educational gaming platform designed for children to learn about animals through interactive games and quizzes. Built with the MERN stack, it provides an engaging and fun learning experience with multiple game modes, user authentication, progress tracking, and a responsive design that works seamlessly across all devices.

Tech-Stack: React, Node.js, MongoDB, Express

Chingu project type: Tier 3

Developers: th3ja_, tay_rika, seiya2323, aigul2601, jucheng925, katiaku
Scrum Master: valpolarbear

Deployed app
GitHub

Chingu.io: Build, Collaborate, Learn: Remote Projects V55 Showcase

Cheryl M — Tue, 01 Jul 2025 11:35:46 +0000

Celebrating the successful completion of a six-week journey from May 5th to June 15th, 2025, we’re proud to recognize the incredible accomplishments of our Voyage 55 teams. Throughout this voyage, developers from around the world came together to collaborate, innovate, and grow—tackling real-world challenges with determination, creativity, and teamwork. From Solo Projects to team-based MVPs, participants honed their technical and soft skills while forming meaningful connections. Voyage 55 was a testament to what’s possible when passionate learners support one another in a shared mission. Congratulations to every team member for making this chapter unforgettable!

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

Resource Finder

A modern web application for discovering and searching technical resources with AI-powered assistance.

Tech-Stack: react, typescript,tailwindcss, firebase

Chingu project type: Tier 2

Developers: rajinsiam, elva_0329_62519
Voyage Guide: jdx_code

Deployed app
GitHub

Resourcify

To create a seamless, AI-enhanced platform where developers can quickly find and access top technical resources.

Tech-Stack: React, Node, HTML, CSS, JavaScript, Tailwind

Chingu project type: Tier 2

Developers: theghostwriterdev, zofienora, volvolumia, rafia_farooq
Scrum Masters: kerynrobz, oawoniyi

Demo
Deployed app
GitHub

Find My Resource

App to find Chingu resources (search, save, rate, print out).

Tech-Stack: Python for BE, React + Vite + TypeScript + Tailwind fro FE

Chingu project type: Tier 2

Developers: katiaku, anybis0
Scrum Master: tibamgiselensang_40676

Deployed app
GitHub

DevVault

Easily search, compare, and discover curated software development links from the Chingu's Discord #resource-treasures channel. Build, refine, and expand your web development skills, powered by aggregation and AI.

Tech-Stack: Vite, React, TypeScript, Tailwind CSS

Chingu project type: Tier 2

Developers: sleon33, codingpaige_92447, rahindahouz, ivanrebolledo
UI/UX Designer: jmel4425
Product Owner: viral2287
Scrum Masters: jarokatv, nathie88
Voyage Guide: yalooolya

Deployed app
GitHub

PeerPicks

PeerPicks is a React app that helps users find resources to learn software development recommended by the Chingu Community.

Tech-Stack: React, Tailwind CSS, Redux

Chingu project type: Tier 2

Developers: Msrissaxo, alisonah_15792, purple_0825653, mollyb4538
UI/UX Designer: myoungjinlee
Voyage Guide: vecchit0

Deployed app
GitHub

Resourcery

Resourcery empowers software development professionals by simplifying how they find high-quality learning resources at Chingu. This saves them time and helps them reach their learning goals faster. With Resourcery, learning becomes more focused, efficient, and tailored, making it the go-to tool for continuous growth in the Chingu community.

Tech-Stack: React, Vite, Tailwind CSS, Google Gemini API

Chingu project type: Tier 2

Developers: daileydaileydailey, bhoyem, matthewneie_03831, stevensaurus
Product Owner: xoch5736
UI/UX Designer: moogle_moxie0018
Scrum Masters: mikalafranks, oghenerukevweegbaivwie
Voyage Guide: zuali16

Deployed app
GitHub

Rekurso

An app to help users find technical resources

Tech-Stack: MongoDB, Express.js, React, Node.js

Chingu project type: Tier 3

Developers: rangaraj_37825, jericho1050

Deployed app
GitHub

Chingu Async

A web-based platform designed for Chingu Voyage participants ("Chingu-iens") to showcase their team projects, track individual contributions, and engage with the community through a gamified leaderboard. It fosters transparency, celebration, and networking among Voyage cohorts

Tech-Stack: Backend: Node.js (express) Database: Postgres Auth: GitHub OAuth via Passport.js Frontend: React

Chingu project type: Tier 3

Developer: Riry#8244
Scrum Master: dami_boy

Deployed app
GitHub

fintrack

A Financial Tracker for students.

Tech-Stack: React, Vite, Typescript, Bun, Express, Postgresql, Tailwindcss, ShadcnUI, Docker, Google Cloud

Chingu project type: Tier 3

Developers: li.jack0707, shamiaa01, kuro1234039, affan0o0
Scrum Master: stef8007

Deployed app
GitHub

Habitude

Track habits. Build discipline. Achieve your goals. Habitude is a dynamic, full-stack habit-tracking app that turns everyday routines into measurable progress. Developed by an all-female team as part of the Chingu Voyage program, the app blends powerful backend logic with sleek front-end design to support long-term engagement through clean UI, goal-oriented prompts, and intuitive habit logs.

Tech-Stack: Languages/Frameworks: JavaScript, Next.js, Tailwind CSS User Authentication: NextAuth.js Database: PostgreSQL, Neon, Drizzle

Chingu project type: Tier 3

Developers: lkallen87, mayaj1221, bpb2008
UI/UX Designer: rebelin00
Scrum Master: alina_13140
Voyage Guide: firstnamenika

Deployed app
GitHub

Animal World

It is a project that includes games about animals.

Tech-Stack: React, Node.js, Express, MongoDB

Chingu project type: Tier 3

Developers: tay_rika, th3ja_, aigul2601, seiya2323
Scrum Master: valpolarbear

Deployed app
GitHub

Web Dev Path Updates - May 2025

Cheryl M — Thu, 22 May 2025 00:11:43 +0000

Expanding the team

Since 2020, Web Dev Path has been building a supportive, hands-on community where entry-level tech professionals grow through real experience. Now, we’re stepping into our next phase: onboarding web projects from Canadian small businesses and non-profits that are willing to fund development costs while supporting community learning.

In the last month, we have onboarded four scrum masters and project mangers. Now we are looking for two UI/UX designers to join our team! If you're interested, please send us a message on our website - www.webdevpath.co. Be sure to include your LinkedIn profile and a short introduction so we can schedule a meeting with you!

Migrating to Typescript

We have started planning to migrate our website from JavaScript to TypeScript. This will happen in stages:

1. Upgrade all packages

This includes upgrading Next.js to version 15, React to v19, and we will also have to upgrade Node.js version on Netlify.

2. Setup Typescript Support

Following the Typescript Migration Guide, we will set up the project in a way that it supports both TypeScript and JavaScript files during the transition phase. All new pages and components will be made with typescript while we gradually migrate old JavaScript files to TypeScript.

Moving Away from Styled components

We have completed the migration to styled-components on our website in 2023. Recently, styled-components announced that they are entering maintenance mode. We had a discussion as to whether we have to move away from styled-components.

We believe it might be something we eventually need to do, but there is no immediate need to move away from it. In the next few months, we will investigate alternatives to styled-components, and develop a strategy for the migration.

Chingu.io: Build, Collaborate, Learn: Remote Projects V54 Showcase

Cheryl M — Wed, 07 May 2025 10:38:55 +0000

Chingu Voyage 54 was a six-week, remote, team-based learning experience that brought together developers from around the globe to collaborate on real-world projects. Running from March 3 to April 13, 2025, participants formed agile development teams to build MVPs (Minimum Viable Products) while sharpening both technical and soft skills. Each team member first completed a Solo Project to assess readiness, then joined their team to practice Agile workflows, remote communication, and project planning. With a focus on collaborative learning and professional growth, Voyage 54 empowered developers of all experience levels to contribute, learn, and thrive in a supportive, fast-paced environment. Congratulations to all Voyage 54 teams for completing the journey and showcasing your growth and dedication!

Tier 1 - HTML - Basic Javascript - Basic Algorithms (LANDING PAGES)

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

Tier 1 Team 1

A user-friendly web application designed to guide users in crafting more effective AI prompts. The app provides structured methodologies, real-time feedback, and learning tools to help users continuously improve their prompt-building skill

Tech-Stack: webpack

Chingu project type: Tier 1

Developer: danr0gers4043

Deployed app
GitHub

PromptAlchemy

PromptAlchemy is a React app that helps users create effective AI prompts for Google Gemini using a pentagram prompt structure.

Tech-Stack: React + Vite, Google Gemini API, Netlify, Figma.

Chingu project type: Tier 1

Developers: alisonah_15792, sleon33, mik04303

Demo
Deployed app
GitHub

5tar Ai

5tar AI is a mobile web app designed to help on-the-go users to build high-quality prompts using a structured methodology:the Pentagram. our product will empower users to craft more effective, 5-star quality prompts and improve Google Gemini results.

Tech-Stack: React: for all the logic, many React features were used: components, useState, useEffect, functions... Typescript: for implementing types and catching bugs earlier. React Hook Form: for controlling form updates and reducing unnecessary renders. Zod: for creating validation schema. React Icons: for all the icons in the app. React Router: for all routing needs. React Speech Recognition: for audio dictation. MUI: for all styling, custom classes... Django for handling server-side logic, routing, database interaction Django Rest Framework for building RESTful API PostgreSQL for storing user data, prompts SimpleJWT for authentication using JSON Web Tokens

Chingu project type: Tier 2

Developers: anybis0, adilrahman, shenanigans_7
UI/UX Designer: josewski
Product Owner: estellewraight_97391
Voyage Guide: simonc137

Deployed app
GitHub

PentaGO

An AI web app that allows users to write a better AI prompt

Tech-Stack: Vite - Build tool React.js - Frontend framework Tailwind CSS - Styling Formik & Yup - Form handling & validation React Context API (useContext) - State management React Markdown - Renders Markdown content in React rehype-highlight - Adds syntax highlighting to Markdown code blocks rehype-raw - Allows raw HTML inside Markdown rehype-sanitize - Ensures safe HTML by sanitizing Markdown content remark-gfm - Enables GitHub Flavored Markdown (tables, strikethrough, .)

Chingu project type: Tier 2

Developers: shemigam1#8741, shamiaa01

Deployed app
GitHub

Ember AI

Ember AI is an AI prompt generation helper. Following the Pentagram methodology of building a prompt for use with AI, it guides a user in crafting a well composed prompt by asking for the persona, context, task, output, and constraints of a request. A user can then submit the prompt that is created for response using Google's Gemini AI.

Tech-Stack: React, Typescript, Tailwind CSS, Next.js

Chingu project type: Tier 2

Developers: lkallen87, java8031, bhoyem, ivanrebolledo, kento8146
UI/UX Designer: vanskive
Scrum Masters: chanae_51686, appolnia386
Voyage Guide: jenny_alexander

Deployed app
GitHub

GoalFlow

GoalFlow is a productivity app that helps users set and achieve their goals by leveraging AI to suggest goals and break tasks into smaller, actionable steps.

Tech-Stack: React/NextJs, PostgresSQL/Neon, DrizzleORM etc

Chingu project type: Tier 3

Developers: jericho1050, theawin
UI/UX Designer: sophiefish

Deployed app
GitHub

HushRoom

HushRoom is a real-time anonymous chat app that connects strangers for private one-on-one conversations. No login, no identity — just pure conversation.

Tech-Stack: React, Tailwind CSS, Socket.IO Client, Node.js, Express.js, Socket.IO Server

Chingu project type: Tier 3

Developer: prakshh
UI/UX Designer: jclipa
Voyage Guide: omesha1111

Deployed app
GitHub

e-buy

ebuy is a cloned version of the eBay shopping application. It is a lightweight e-commerce platform that allows users to browse, filter, add items to their cart, and place orders, focusing on a seamless user experience and backend efficiency

Tech-Stack: main frontend tools/packages are: - react (main language) - tailwind (styling - how app looks) - react router (for having different "pages", these are technically called routes) - redux toolkit (for centralization of logic) main backend tools/packages are: - express (for all APIs - meaning communication with the database) database: - mongoDB

Chingu project type: Tier 3

Developers: Riry#8244, predrag94, programmerflare
Scrum Master: dami_boy

Deployed app
GitHub

Penta AI

A Gemini powered AI chat, focusing on bringing structure to the chaos of prompt engineering through the pentagram method.

Tech-Stack: React, node.js, MongoDB, Gemini AI

Chingu project type: Tier 3

Developers: vecchit0, minezzig
Product Owner: patstephen19
Scrum Master: anitaby

Deployed app
GitHub

AskIQ AI Helper App

AskIQ is an innovative AI Helper App designed to provide users with intelligent responses through a user-friendly interface. The project utilizes the Google Gemini API to analyze input from users and generate accurate and relevant answers based on data input via a pentagram form.

Tech-Stack: 1. NodeJs 2. Typescript 3. Tailwind CSS (styling) 4. React 5. PostgresSQL (Supabase) 6. Project Management Tools (Jira, Mural, Zephyr) 7. Figma, Discord, Github, Schej

Chingu project type: Tier 3

Developers: mariii#3559, zaid960__73672, albertongodi, captconor
Scrum Masters: dj_bliss, vickie1851
Data Scientist: soos3882

Demo
Deployed app
GitHub

The Animal World app

The Animal World app is an educational website designed to help users learn more about animals.

Tech-Stack: MERN

Chingu project type: Tier 3

Developers: tay_rika, th3ja_, seiya2323, jucheng925
Scrum Master: valpolarbear

Deployed app
GitHub

Prompto

Prompto, an AI Helper, is a solution born from the belief that AI interactions should be effortless, precise, and accessible to all. Our goal is to help users craft structured, high-quality prompts that deliver relevant and effective AI responses.

Tech-Stack: React, Node, Docker, TypeScript, tailwind,Yarn, Express, Prisma, Playwright Test, Gemini, Jest, and other technologies.

Chingu project type: Tier 3

Developers: luiscastillokc, bkschatzki, aigul2601, firstnamenika
UI/UX Designer: trupti_68923
Scrum Masters: stef8007, xoch5736, xoch5736

Deployed app
GitHub

DnDnDB

Static no-code site builder where users can drag and drop various elements to build their own website.

Tech-Stack: Frontend: React, Typescript / Backend: Django, PosgreSQL

Chingu project type: Tier 3

Developers: dmanfromm5736, munky_quack, syntax#7986
Product Owner: viral2287
Scrum Master: aimhigh1st_14055

Deployed app
GitHub

Chingu.io: Build, Collaborate, Learn: Remote Projects V53 Showcase

Cheryl M — Tue, 25 Feb 2025 12:18:27 +0000

Marking the end of an incredible six-week journey from January 6th to February 16th, 2025, we are excited to celebrate the remarkable accomplishments of our Voyage 53 teams. A huge congratulations to everyone who tackled this challenge with passion, creativity, and teamwork. This voyage was filled with innovative projects, lasting connections, and impressive technical achievements—an inspiring chapter of growth, collaboration, and discovery.

Tier 1 - HTML - Basic Javascript - Basic Algorithms (LANDING PAGES)

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

Menu Planner

A menu scheduling application that allows managers to create weekly menus for staff.

Tech-Stack: HTML, CSS, JS

Chingu project type: Tier 1

Developers: mollyb4538, purple_0825653, java8031, jaltrock

Deployed app
GitHub

Plate Date

Plate Date is a dynamic menu scheduling application that enables managers to create and share weekly menus with employees. The goal of Plate Date is to allow users to seamlessly schedule unique menu items while accounting for different allergies. All dishes are displayed live on the main page with the dates, ingredients, and calories listed.

Tech-Stack: HTML, CSS, Javascript

Chingu project type: Tier 1

Developer: bhoyem, ZohebT
UI/UX Designer: moogle_moxie0018
Scrum Master: chanae_51686

Deployed app
GitHub

Schedulicious

Schedulicious is an automated meal scheduling platform that helps managers create allergy-conscious, diverse weekly menus for their employees with ease.

Tech-Stack: React

Chingu project type: Tier 2

Developer: chloe_zhou

Demo
Deployed app
GitHub

Menu Scheduler

Menu Scheduler is a web application project that focuses on developing a menu scheduling application that allows managers to create and share weekly menus for staff workers. The application ensures employees have clear visibility of the planned meals while addressing specific dietary restrictions and allergies.

Tech-Stack: React (State management, Hooks), Tailwind CSS (Styling), date-fns (Date formatting), lucide-react (Icons), jsPDF & xlsx (Exporting data), Vite (React bundler)

Chingu project type: Tier 2

Developer: prakshh

Demo
Deployed app
GitHub

project-tier2-menu-scheduler

This project focuses on developing a menu scheduling application that allows managers to create and share weekly menus for staff workers. The application ensures employees have clear visibility of the planned meals while addressing specific dietary restrictions and allergies.

Tech-Stack: 1) Front-end [github pages] React, Vite, TailwindCSS 2) Back-end Nodejs[Serverless], Database [mongodb, Mongodb Compass] API endpoints [ Netlify] 3) images Cloud storage for [Cloudinary] Edit tools [Photoshop] image source [free unsplash]

Chingu project type: Tier 2

Developers: leonkountouras, theawin
UI/UX Designer: celineninon_83824
Scrum Master: kenako0127
Voyage Guide: cash_53

Deployed app
GitHub

PlatePlanner

Plate Planner is a user-friendly weekly menu scheduling application designed to simplify meal planning for workplaces. With a focus on inclusivity and transparency, Plate Planner allows managers to create and share weekly menus while accommodating employees' dietary restrictions and allergies.

Tech-Stack: Frontend: ReactJs, TailwindCSS; Routing: React Router; UI/UX Design: Figma; Data Persistence: Local Storage; Deployment: Netlify

Chingu project type: Tier 2

Developers: reallion., ikram_mai
Scrum Master: dami_boy
Voyage Guide: carlos_morais

Deployed app
GitHub

PlatePal

From preferences to plates. As easy as 1,2,3, generate your menu with or without diet restrictions. A simple, user-friendly and accessible menu scheduler.

Tech-Stack: FontAwesome, HeadlessUI, React, React-Calendar, React-DOM, React-Router-Dom, TailwindCSS-TextShadow.

Chingu project type: Tier 2

Developers: zephyr_koryami, prernalele0868, lkallen87, breezydd
UI/UX Designer: breh3417
Product Owner: viral2287
Voyage Guide: andresc1310

Demo
Deployed app
GitHub

Weekly Bytes

Weekly Bytes is an intuitive web application designed to help managers effortlessly create and share weekly meal plans while prioritizing staff safety and dietary needs.

Tech-Stack: React, Tailwind CSS, Firebase, Material UI Icons, JSPDF, and React-Toastify

Chingu project type: Tier 2

Developers: ivanrebolledo, junlee0325, Radhika#3074, johnnydcreates, jcsmiley
UI/UX Designer: gcfvar
Product Owner: j_bunnie
Scrum Master: lisa_88785

Demo
Deployed app
GitHub

Considerate Carrot

Weekly Menu Scheduler for Workers

Tech-Stack: React, CSS, JavaScript

Chingu project type: Tier 2

Developers: guillermoguevara887, sockey1388_57286, matthewneie_03831, ryan_nolan
UI/UX Designer: abbyanne
Scrum Master: johnsonval

Deployed app
GitHub

Menu Planner

Inclusive, efficient, and customizable weekly meal planning app for managers to plan employees' meals

Tech-Stack: React, Tailwind

Chingu project type: Tier 2

Developers: .ericac, minorobsession, frosty5493
Scrum Masters: .teresag, equilibria7642
Voyage Guide: valpolarbear

Deployed app
GitHub

Wanderlust

Wanderlust is a full-stack travel planner application designed to provide users with a seamless and personalized trip-planning experience. It allows users to create, organize, and manage their trips effortlessly. The app features robust itinerary management, including adding destinations, accommodations, transportation, and activities with drag-and-drop reordering. Collaboration features enable shared itineraries, co-editing, and activity suggestions. Wanderlust integrates with Weather and Currency APIs to offer real-time data and incorporates personalized recommendations based on user preferences and dietary needs.

Tech-Stack: HTML, CSS, JavaScript

Chingu project type: Tier 3

Developers: umer_61161, suhanii_13, goldgroove06, zarrarabid122, omesha1111
Voyage Guide: jdx_code

Deployed app
GitHub

Meal planner

A simple meal scheduler that allows managers to schedule meals quickly based on workers allergies.

Tech-Stack: React, TypeScript, Material UI, Emotion, Tailwing CSS, CRACO, React Router, Lucide React, Node.js, Passport, Jason Web Tokens, Bcrypt/Bcryptjs, Nodemon, PDFkit

Chingu project type: Tier 3

Developers: _devim, denis_mwangi
Scrum Masters: AndreeaT, anitaby
Voyage Guide: tesfaye9741

Deployed app
GitHub

DiNostalgia

A platform that educates and entertains adults who love dinosaurs. This app combines educational content, interactive features, and e-commerce functionality to provide a comprehensive and engaging experience for dinosaur enthusiasts.

Tech-Stack: React, Tailwind CSS, Node.js, Express, Supabase (PostgreSQL)

Chingu project type: Tier 3

Developers: minezzig, predrag94, gahs1,
Product Owners: primmusss, estellewraight_97391

Deployed app
GitHub

Partiyo

Partiyo is an E-invite app for people to use for their parties and ceremonies. The user is able to create an invite on the app filled with specific details to invite family and friends.

Tech-Stack: node.js, react

Chingu project type: Tier 3

Developers: mariii#3559, ms_07_, bigtibardoe_73437
UI/UX Designer: .kkkaia
Scrum Master: tobby6488
Voyage Guide: mariana004457

Deployed app
GitHub

BrightPath | Courses for Devs

BrightPath is a custom platform for online courses covering niche tech topics not currently addressed elsewhere.

Tech-Stack: Frontend: Next.js (hosted on Netlify) Backend: Express.js (hosted on Railway) Database: PostgreSQL Other: OAuth Authentication

Chingu project type: Tier 3

Developers: Greenvarch#1796, exklibur, programstuff, alterego_75789
UI/UX Designer: joekotvas
Scrum Master: zuali16

Deployed app
GitHub

Luminaria

Luminaria is a library application that helps users rate books, keep track of titles they've read and want to read. It uses the openlibrary API to fetch trending books.

Tech-Stack: NextJs, MongoDb, Github and Google oAuth, NextAuth

Chingu project type: Tier 3

Developers: abbywankenobi#5392, deast#7374, sittora#1043
Scrum Master: sarita5515

Deployed app
GitHub

ReciPlease

ReciPlease empowers individuals to achieve and maintain their health and weight loss goals by providing personalized, easy-to-follow meal suggestions based on their dietary needs.

Tech-Stack: Nextjs, MongoDB, spoonacular API, Tailwind and Shadcn

Chingu project type: Tier 3

Developers: skeno1110, tigeryash, euphorio
Scrum Master: xoch5736
Data Scientist: Behrooz#2631
Voyage Guide: valpolarbear

Deployed app
GitHub

Menu Scheduler

Manage a menu schedule for your team along with member allergies, update dishes, and have a calendar view

Tech-Stack: React, supabase (postgres)

Chingu project type: Tier 3

Developers: louis.code#9119, bobbygrdn
Scrum Master: digable1

Deployed app
GitHub

The Animal Shelter App

The Animal Shelter app is an educational website designed to help users learn more about animals in need.

Tech-Stack: MERN

Chingu project type: Tier 3

Developers: tay_rika, jucheng925
Scrum Master: valpolarbear

Demo
Deployed app
GitHub

Chingu.io: Build, Collaborate, Learn: Remote Projects V52 Showcase

Cheryl M — Mon, 23 Dec 2024 12:21:41 +0000

Celebrating the successful completion of an extraordinary six-week journey from November 4th to December 15th, 2024, we proudly highlight the outstanding achievements of our Voyage 52 teams. Congratulations to all participants who embraced this adventure with determination, ingenuity, and team spirit. Let's celebrate the groundbreaking projects, meaningful connections, and technical excellence that defined this transformative journey of discovery.

Tier 1 - HTML - Basic Javascript - Basic Algorithms (LANDING PAGES)

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

Solar planner Services

It was a good challenge to enhance my skills and increase my self-confidence so that I could accept and complete the project

Tech-Stack: IndexedDB, vanilla javascript , HTML,CSS

Chingu project type: Tier 1

Developer: hala02038

Demo
Deployed app
GitHub

Solar Plexus

This is a solar pannel booking project that allows users to book and admins to manage appointments.

Tech-Stack: React CSS Firebase html node.js

Chingu project type: Tier 1

Developers: breezydd, .yiska, zephyr_koryami
UI/UX Designer: moogle_moxie0018
Data Scientist: markc800
Voyage Guide: yalooolya

Deployed app
Deployed app (Admin)
GitHub

Solar Vibes

Web application that simplifies the process of booking and managing solar panel evaluations for Los Angeles residents and City Hall employees.

Tech-Stack: JavaScript, CSS, HTML

Chingu project type: Tier 1

Developers: yyeehaaw, guillermoguevara887, -Christina-#6188, minorobsession
Scrum Masters: equilibria7642, sarita5515

Demo
Deployed app
GitHub

Tier 2 Team 20

The Solar Panel App was developed as part of Chingu Voyage 52. This App enables users to book appointments seamlessly. The app communicates with an API to handle the booking data and confirms success upon completing the booking process.

Tech-Stack: FrontEnd: Next.JS, Tailwindcss; Backend: Node.JS, Express.js, Prisma, MongoDB; Monorepo Management: Lerna

Chingu project type: Tier 2

Developers: glswim, swlho, ryu_0724, azalyarahmatika
UI/UX Designer: khb2me

Deployed app
GitHub

Sunergy

This Project helps Los Angeles residents book requests to install solar panels at there home.

Tech-Stack: Node JS HTML CSS

Chingu project type: Tier 2

Developers: perry3568, JakeMa4o#6260, zarrarabid122

Deployed app
GitHub

Solar panel planner

SolarSync LA is making solar energy adoption simple and accessible for LA residents.

Tech-Stack: React, Tailwind, Redux Toolkit

Chingu project type: Tier 2

Developers: ayumi4649, predrag94, ikram_mai
Scrum Masters: nune., anitaby
Voyage Guide: simonc137

Demo
Deployed app
GitHub

SolarRise

Empowering Los Angles residents to embrace sustainable energy solutions by providing a seamless and efficient platform for solar panel evaluation and installation guidance.

Tech-Stack: Babel Webpack React-DOM React Google Maps React-Router-Dom React Hook Form React Datepicker react-use-measure Tailwind Css Headless UI React Icons Prop Types React PDF Daisy UI ESLint Axios React Vite uuid

Chingu project type: Tier 2

Developers: reallion., moonshark26, starkspark, ekdms96, lkallen87
Product Owner: j_bunnie
Scrum Master: lidia_0865
Voyage Guide: andresc1310

Deployed app
GitHub

Solarite

Web app which advertises services for solar panel installation or maintenance in Los Angeles which residents can make an account and schedule an appointment for an employee to conduct the specified service.

Tech-Stack: React, Vite, TailWindCSS, Mapbox, Supabase,

Chingu project type: Tier 2

Developers: troyzhen, tigeryash, deborahlyra, yash040112_70726

Deployed app
GitHub

Solar Booker

This app provides a way to connect Los Angeles residents and city hall employees for solar panel evaluations. Residents can create visit requests and city hall employees can schedule them accordingly.

Tech-Stack: React

Chingu project type: Tier 2

Developers: .ericac, matthewneie_03831, jordanr2m
Voyage Guide: valpolarbear

Deployed app
GitHub

Mobile Phone Usage & Behavior

Our project is to review a mobile usage dataset and explore how mobile phones are being used and the behaviors of their owners.

Tech-Stack: N/A

Chingu project type: Tier 2

Data Scientists: arabaaddaquay, vijay01514

Demo
Deployed app
GitHub

HL Solar

Given prompt: Solar Panel Planner app

Tech-Stack: Python, Flask, Firebase, HTML, JS, CSS

Chingu project type: Tier 3

Developer: carrotsss_5800

Deployed app
GitHub

BrightGrid

BrightGrid is a full-stack web application designed to facilitate Los Angeles residents in scheduling solar panel evaluation visits while enabling city hall employees to manage and optimize these visits efficiently.

Tech-Stack: Next.js, React.js, Tailwind CSS, MongoDB (Mongoose)

Chingu project type: Tier 3

Developers: MHasan1037#5765, ahsas.sharma
Voyage Guide: jdx_code

Deployed app
GitHub

LiveScape

LiveScape is designed for people who want to discover venues with live music happening in real time, without the wait associated with big concert events.

Tech-Stack: Frontend: React with TypeScript, ViteJS as Build Tool, CSS Tailwind. Backend: Node.JS with TypeScript, Express as API framework, Prisma as ORM, PostgreSQL as database, Zod for validation, Jest for testing.

Chingu project type: Tier 3

Developers: cris.valente, honvedo.adam, carlos_morais
Scrum Master: dami_boy

Deployed app
GitHub

SunCityLa

SunCityLA project is a full-stack application, designed to support residents, in one hand, to schedule/manage their appointments and City Hall Employees, in another hand, to manage/plan visits effectively and in a timely manner. The app includes an admin interface for authorized City Hall Employees to view as well as resident interface, to plan visit schedules.

Tech-Stack: Nextjs, Postgresql, prisma, next-auth

Chingu project type: Tier 3

Developers: Fouad#1791, S13#8785, Feyra#8759
Scrum Master: mariana004457

Deployed app
GitHub

Kinderly

Web based Day Care Management System

Tech-Stack: Django / Django REST Framework, PostgreSQL ,JSONWebToken ,React, CSS, MaterialUI ,Axios

Chingu project type: Tier 3

Developers: alterego_75789, rumen_68879
Scrum Masters: hebarezk, johnsonval

Demo
Deployed app
GitHub

Sippy

Develope a user-friendly, web-based application for the City of Los Angeles to support a solar panel initiative aimed at combating global warming. The platform enables residents to schedule evaluations for solar panel installation and allows city employees to manage and plan visits efficiently. The MVP focused on streamlining appointment scheduling and operational workflows to promote sustainable energy adoption.

Tech-Stack: Figma, Google maps API, Postgress, Docker, Prisma, OAuth, Next.js, typescript, Tailwind, CSS

Chingu project type: Tier 3

Developers: munky_quack, n3ndor, mahyar6067, deast#7374

Deployed app
GitHub

Solarize

Installation of Solar panels on the roof of houses and raising request as a resident for installation.

Tech-Stack: Nextjs, Supabase, Bootstrap, Google Maps API

Chingu project type: Tier 3

Developers: rossicusmaximus, noordinarygary

Deployed app
GitHub

RayVolution

Our app lets clients book appointments for a technician to install solar panels at their address. We use NextAuth for Google sign in; registered admin emails have the option to view, schedule and organize all appointments requested. We also have a map display using the Google Maps API with address markers on the appointments list. The appointments are sorted in order by using GraphHopper's route optimization call.

Tech-Stack: React, Next.js, MongoDB

Chingu project type: Tier 3

Developers: aya#3729, jessnugget, timkent, kristi_fied, irondoc
Scrum Master: zuali16
Voyage Guide: dejmedus

Deployed app
GitHub

The Space Discovery App

The Space Discovery app is an educational website designed to help users explore and learn more about space.

Tech-Stack: React.js / We're still working on the backend (MongoDB, Node.js))

Chingu project type: Tier 3

Developers: Deepali#7555, tay_rika, Rili#6734, jucheng925, psyk3s
Product Owner: valpolarbear

Deployed app
GitHub

Chingu.io: Build, Collaborate, Learn: Remote Projects V51 Showcase

Cheryl M — Fri, 01 Nov 2024 13:28:41 +0000

Celebrating the successful completion of an exciting six-week journey from September 2nd to October 13th, 2024, we proudly highlight the outstanding achievements of our Voyage 51 teams. Congratulations to all participants who approached this adventure with creativity, collaboration, and resilience. Let’s take a moment to honor the remarkable progress, dedication, and innovation demonstrated throughout this inspiring period of growth and teamwork.

Tier 1 - HTML - Basic Javascript - Basic Algorithms (LANDING PAGES)

Tier 2 - Intermediate Algorithms - Front-end Projects (FRONT-END)

Tier 3 - Advanced Projects - Apps having both Front-end and Back-end components (FULL STACK)

Splitzy

From casual dinners to group vacations and birthday parties, splitting expenses has long been a part of our social interactions. As our world becomes more interconnected, the need for an efficient and equitable method to manage shared costs has become increasingly important.

Tech-Stack: HTML, CSS, JavaScript

Chingu project type: Tier 1

Developers: psyk3s, maryurpast, jejo7241, mr.eternal1111
Product Owner: tushhh
Scrum Master: julia._h.

Deployed app
GitHub

Expense Sharing App

The Expense sharing app is a fully responsive app that allows users to add events and share expenses between members.

Tech-Stack: JavaScript, HTML, CSS

Chingu project type: Tier 1

Developers: jaltrock, carina1248, purple_0825653, robodlan, nataliedex_16796_39065
UI/UX Designer: beastlybehavior

Deployed app
GitHub

SplitWind

SplitWind is an easy way to split the expenses and bills between a group of friend without the headsche of using calculators

Tech-Stack: React, Typescript, Firebase, Tailwind

Chingu project type: Tier 2

Developers: amin5741, marwanbaz, perry3568
Scrum Master: dunsin0488

Deployed app
GitHub

SplitSmart

App allows user to create a group and split the bills.

Tech-Stack: react, tailwind, and redux toolkit

Chingu project type: Tier 2

Developers: cash_53, predrag94
Product Owner: tochi07088
Scrum Master: afbaf86

Deployed app
GitHub

Splitty

As part of Voyage 51 our team are creating an Expenses Splitter app to allow friends, families and groups to easily split and track expenses.

Tech-Stack: React

Chingu project type: Tier 2

Developers: hmcf1991, _asiedu, tesfaye9741
UI/UX Designer: BettyC
Scrum Master: emm_squiggly_learner

Demo
Deployed app
GitHub

Splitmate (Expense Splitter App)

Splitmate is an app to help groups plan and split expenses accordingly.

Tech-Stack: React, TailwindCSS, Shadcn

Chingu project type: Tier 2

Developers: josephjustin#2263, rusbers, caelacodes, yawcoder
Scrum Masters: oluyemiadebayoesho, anitaby
Voyage Guide: simonc137

Deployed app
GitHub

Slice

As part of this project, we developed an app called Slice - an expense splitting app that provides a simple, clear, and fair solution for a group of friends or multiple groups, to make splitting costs for rent, utilities, and groceries seamless. Unlike our competitors, this product will deliver an organized and intuitive experience that ensures transparent financial expectations, covering expenses like rent, utilities, subscriptions services, groceries, etc.

Tech-Stack: React + Vite

Chingu project type: Tier 2

Developers: reallion., satomili, elta7679
UI/UX Designer: leonardost051
Product Owner: patpate89
Scrum Master: hilda0205

Deployed app
GitHub

Divvy Up

Our project is an expense splitter app.

Tech-Stack: React, Vite, MUI, and GitHub Pages

Chingu project type: Tier 2

Developers: justken216, wanderlaur
Scrum Masters: m_j_16_, kirkblackjr

Deployed app
GitHub

FairShare

FairShare is a user-friendly and efficient application designed to streamline the management of expense splitting for groups of friends, family, and colleagues. Whether it's splitting the bill at a restaurant or coordinating costs for a group vacation, FairShare ensures fair and transparent expense tracking.

Tech-Stack: React, Vite, node.js, Firebase, Chartjs, Tailwind

Chingu project type: Tier 2

Developers: plaseo, nandhini7666, kkenney
Scrum Master: john_hockey_fan

Deployed app
GitHub

Let's Split It

App to split bills amongst friends

Tech-Stack: React, Firebase

Chingu project type: Tier 2

Developers: singhalex, kristi_fied, matthewneie_03831, costa_carlos
UI/UX Designer: abbyanne
Product Owner: ecllipse_88185
Scrum Master: smiti7788

Deployed app
GitHub

Splitit

Splitit is your go-to app for effortlessly managing group expenses. Whether you're planning a dream vacation, sharing a delicious dinner, or splitting household bills, Splitit has got you covered.

Tech-Stack: Front-end: React with TypeScript, ViteJS as Build Tool, CSS Tailwind. Back-end: Node.JS with TypeScript, Express as API framework, Prisma as ORM, PostgreSQL as database, Google Oauth, Neon Console

Chingu project type: Tier 3

Developers: honvedo.adam, cris.valente, carlos_morais
Scrum Master: dami_boy

Deployed app
GitHub

V51-tier3-team32

Funsplit An expenses splitting app Users can create groups and enter details of expenses shared by the group. The user can allocate a proportional share of the expenses to each member of the group. The user can then use the check boxes on the app to tick off when each user has paid off the amount they owe for their share of the total expense.

Tech-Stack: Our team used vite for this app. Heroku was used to deploy the backend of the app. Vercel was used to deploy the frontend of the app.

Chingu project type: Tier 3

Developer: debbie6170
Scrum Master: mariana004457
Voyage Guide: Marksist#1478

Deployed app
GitHub

WeSplit

WeSplit, an expense splitter app, is designed to simplify the process of dividing costs among a group of people. It provides a user friendly interface of providing the detailed information of the expenses, adding friends to the expenses, grouping the expenses for convenience of the user.

Tech-Stack: Nextjs to build dynamic user interfaces (frontend), Nextjs to handle server side logic and MongoDB

Chingu project type: Tier 3

Developers: bonillacodes, noordinarygary, yalooolya
Product Owner: goldilocks0164
Scrum Master: lidia_0865

Deployed app
GitHub

GeoDash World

An unique, interactive and fun oriented Geographical Area Learning app that allows users to learn the neighbourhoods, streets and landmarks in major cities through creative game activities

Tech-Stack: MERN stack: MongoDB, Express.js, React.js, and Node.js, Google Maps API

Chingu project type: Tier 3

Developers: tay_rika, monsieurcheats4107, jucheng925, mahyar6067
Product Owners: hongtuyet91, jtaylo98
Scrum Master: suruchipatki5
Voyage Guide: valpolarbear

Demo
Deployed app
GitHub

TravelIt

TravelIt is an interactive, collaborative planner app that allows you to create an itenerary for your travel adventure, and invite friends to collaborate on it.

Tech-Stack: NextJs, Typescript, MongoDb

Chingu project type: Tier 3

Developers: euphorio, deast#7374
Scrum Master: lootingmonk
Voyage Guide: andresc1310

Deployed app
GitHub

Expense splitter

Split expenses easily with friends using our expense splitter app. Here's what you can do: 1. Create and manage groups for different occasions (roommates, trips, events) 2. Add friends to your groups and track shared expenses 3. Upload receipt photos as proof of payment 4. Monitor each person's balances The app makes it simple to keep track of shared costs and ensure everyone pays their fair share.

Tech-Stack: MERNest.js

Chingu project type: Tier 3

Developers: Despire#1874, Gagan#1294, dhayv

Deployed app
GitHub

The Bee Saving Project

It's no secret that the declining bee population is causing an environmental crisis. A future without bees is bleak, but did you know there are things you can do to make a big impact? Join us in saving wild bees! Our app fosters collaboration, awareness, and a sustainable future for pollinators and our planet. Every bee counts!

Tech-Stack: Frontend: React + Vite / React Router, Redux Toolkit, TailwindCSS, Chart.js, Leaflet Backend: NodeJS / Express.js Database: MongoDB / Mongoose Authentication: Auth0 / JWT Tools: Postman, Git, GitHub, Figma, Render, Jira

Chingu project type: Tier 3

Developers: kseniaistratova, valpolarbear, seiya2323, nishavijai, natalie05514, brockdev, deepali7555, ewecode

Deployed app
GitHub

Team 39 - Data Science Project

This project analyzes three datasets: movies, critic reviews, and user reviews. It covers data cleaning, analysis, visualization, linear regression, and NLP techniques to explore themes in movie reviews.

Tech-Stack: Jupyter Notebooks; Google Colab; Google Drive

Chingu project type: Tier 3

Data Scientists: muffin_kingdom, lilith_10, arabaaddaquay

Deployed app
GitHub

Self-Hosted Chat Solutions for LLMs: Open WebUI

Cheryl M — Mon, 14 Oct 2024 02:19:14 +0000

I have been experimenting with various Large Language Models (LLMs) for things like proof reading, code suggestions, learning Japanese using platforms like ChatGPT and Claude AI. However, I keep hitting the daily limits and I have to go to different websites to use their chat interfaces. Their subscriptions are not cheap.

I then tried some local LLMs, using Ollama. Ollama doesnt have an official chat interface, and I found Open WebUI. It is super easy to set up, and supports both OpenAI API and Ollama out of the box using your API keys. Although there are still costs associated with purchasing credit to use the API keys, these expenses are significantly lower than the subscriptions. Since I already have credits for some of my personal projects so this is a plus.

Open WebUI can be extended use Anthropic API keys (and other LLM API keys) using Pipelines.

Step 1: Install Ollama (Optional)

Ollama is an open source tool that enables us to run various local LLMs on our own machines. To get started, download the installer from https://ollama.com/. Once install, use the CLI to pull a model. For reference, the available models are listed here.

For example, to pull the model llama3.2, use this command ollama pull llama3.2 in your terminal.

Step 2: Set Up Open WebUI

The setup is straightforward using docker (recommended). The Open WebUI Getting Started Page also has instructions for alternative installation methods.

Once the setup process is completed, Open WebUI will be available at http://localhost:3000

Navigate to Admin Panel > Settings > Connections to enter your openAI API Key

Step 3: Install Pipelines (Optional)

Pipelines are like plugins for Open WebUI. They enable us to perform actions using non-OpenAI LLM providers, and much more.

Again, setting up Pipelines is pretty straightforward using docker. Instructions are available here.

The Docker Desktop containers page should look like this (Im running Open WebUI on port 3080 instead of 3000).

Navigate to Admin Panel > Settings > Connections > OpenAI API , and add a new entry:

API Base URL: http://localhost:9099 API KEY: 0p3n-w3bu!

If Open WebUI is also running in a docker container, use the following configuration:

Base URL: http://host.docker.internal:9099API KEY: 0p3n-w3bu!

The Connections section should now look like this.

We will add the Anthropic Manifold Pipeline as an example. All the official pipelines are available here. Its important to only fetch pipelines from sources you trust.

Paste this URL into the Install from Github URL and then click the install button:

https://github.com/open-webui/pipelines/blob/main/examples/pipelines/providers/anthropic_manifold_pipeline.py

After installing the pipeline, enter your Anthropic API Key and click Save.

Now I can pick Anthropic, OpenAI or Ollama models using the same app.

Open WebUI is a powerful tool that can be customized to meet different needs. To explore the various features it offers and how they can enhance your experience, be sure to check out their features page here.

Handling Refresh Token with Next.js, Auth.js (next-auth v5) Credentials Provider, and HTTPOnly Cookie

Cheryl M — Fri, 27 Sep 2024 23:40:09 +0000

I worked on a Next.js app that connects to a NestJS backend for authentication using an access token and a refresh token stored as HttpOnly Cookie. The main challenge is that cookies are read-only in server components; they can only be used in server actions and route handlers.

Access tokens, which are required for all requests to access the backend, are short lived. When an access token expires, a new one needs to be obtained using the long-lived refresh token. As long as the refresh token is valid and matches the ones stored in the backend, the authentication server will issue a new access token and the refresh token will also be renewed. In our application, access tokens last for 30minutes, while refresh tokens expire in 7 days. This means if the user has not logged in or made any requests, they will need to re-authenticate.

In this article, Ill cover two different strategies to automatically refresh access token: using a request wrapper and using axios request interceptor. The article assumes a basic understanding of Next.js and next-auth. You can find the upgrade guide from next-auth v4 to v5 here.

Only key parts of the code will be shown but the full code is available here:

https://github.com/cherylli/next-refresh-token-demo

Setup Auth.js (next-auth v5)

Install Auth.js following this page.

Credentials Provider

Set up the credentials provider based on this page. In the authorize function, send a request to the backend to log in:

const authResponse = await axios.post( `${process.env.API_BASEURL}/auth/login`, { "email": credentials.email, "password": credentials.password})

Then, retrive the cookies from the response headers and set cookies in the browser using next.js cookies. Since this is a server component, it doesnt directly set cookies in the browser.

const authCookies = authResponse.headers['set-cookie']await setCookies(authCookies)

Parse the cookies and set them:

// set-cookies.tsimport {parse} from "cookie";import {cookies} from "next/headers";export const setCookies = async (authCookies: string[] | undefined) => { 'use server' if (authCookies && authCookies.length > 0) { authCookies.forEach(cookie => { const parsedCookie = parse(cookie) const [cookieName, cookieValue] = Object.entries(parsedCookie)[0] cookies().set({ name: cookieName, value: cookieValue, httpOnly: true, maxAge: parseInt(parsedCookie["Max-Age"]), path: parsedCookie.path, sameSite: 'none', expires: new Date(parsedCookie.expires), secure: true, }) }) }}

Back in auth.ts, we send another request to the server to retrieve user information. This step is optional, but this is commonly done to display user information. The important part here is to attach the cookies in the request headers AND include withCredentials. If the request is sent from a client component, we can omit setting cookie in headers as they are automatically attached.

const userRes = await axios.get( `${process.env.API_BASEURL}/users/me`, { headers: { cookie: authCookies }, withCredentials: true },)

Return user details, which logs the user in,

return { id: userRes.data.id, name: `${userRes.data.firstName} ${userRes.data.lastName}`, email: userRes.data.email, roles: userRes.data.roles,}

If we want to use role-based access, we can use the signIn callback, where ExtendedUser type is a custom type which defines our own user type using module augmentation.

const callbacks = { signIn({user}: { user: ExtendedUser }) { const allowedRoles = ['admin', 'evaluator'] return !!user.roles?.some(role => allowedRoles.includes(role)) }}

export the authConfig,

const authOptions: NextAuthConfig = { session: { strategy: 'jwt' }, providers: [credentialsConfig], callbacks, secret: process.env.AUTH_SECRET,} satisfies NextAuthConfigexport const {handlers, auth, signIn, signOut} = NextAuth(authOptions)

Requesting a new access token using the /refresh route

While this is not required for the solution, it helps with getting to the final implementation. Sending a request to the backend from client and server components are slightly different.

Client Components

First, we create some server actions for next-auth signIn and signOut.

// auth-helper.ts'use server'import {signIn, signOut} from "@/auth";export const signInSA = async (redirect: string = '/') => { await signIn('credential', {redirectTo: redirect})}export const signOutSA = async () => { await signOut()}

When requesting in a client component, it is not necessary to manually attach the cookies (access token and refresh token), as the browser automatically includes the stored cookies. On success, the browser cookie is updated with the new tokens. If the refresh token is missing or invalid, a 401 error is returned. In this case, the user will be logged out and redirected to the current page after signIn.

// app/page.tsx (client component)const handleRefreshClient = async () => { await axios.post(`${process.env.NEXT_PUBLIC_API_BASEURL}/auth/refresh`, {}, { headers: { 'Content-Type': 'application/json', }, withCredentials: true }).catch(e => { if (axios.isAxiosError(e)) { if(e.response?.status ===401) { // refresh token expired signInSA(pathname) } } throw e })}

Server Components

When refreshing tokens in a server component, we will need to manually set cookies, which requires using a server action or a route handler.

It is important to call the refresh server action from a client component. When calling from a server component, I get the follow error.

Error: Cookies can only be modified in a Server Action or Route Handler. Read more here .

Here is the code for handling the refresh server side. In the server component, we need to get the refresh token from the browser cookies, attach it to the request, then update the browser cookie with the new tokens.

// page.tsx (client component)const handleRefreshServer = async () => { await refreshServer()}

// refresh.ts (server component)'use server'import axios from "axios";import {cookies} from "next/headers";import {setCookies} from "@/utils/set-cookies";import {signInSA} from "@/utils/auth-helper";export const refreshServer = async () => { const refreshToken = cookies().get('refresh_token')?.value || '' try { const refreshResponse = await axios.post(`${process.env.API_BASEURL}/auth/refresh`, {}, { headers: { 'Content-Type': 'application/json', Cookie: `refresh_token=${refreshToken}` }, withCredentials: true }) await setCookies(refreshResponse.headers['set-cookie']) } catch (e) { if (axios.isAxiosError(e)) { if(e.response?.status ===401) { // refresh token expired await signInSA() } } throw e }}

Automatically Request a new Access Token

We can check if an access token is present in the cookies, if it is, proceed with the request. Otherwise, we request a new access token using the refresh token. If the refresh token is missing, the user will be redirected to the sign-in page to get new tokens upon sign in. This article covers two strategies:

Using a request wrapper
Using axios interceptor

Request Wrapper

This method works with both Axios and Fetch. It essentially wraps the request in a function and checks if the access token is present before sending the actual request. If the access token is missing, it fetches the tokens and attaches the new access token to the request.

Setup the wrapper function (server action)

// services/requests.ts'use server'import {cookies} from "next/headers";import {refreshServer} from "@/services/refresh";import axios from "axios";export const getRequest = async (path: string) => { let accessToken = cookies().get('access_token')?.value || '' if (!accessToken) { await refreshServer() } accessToken = cookies().get('access_token')?.value || '' const res = await axios.get(`${process.env.API_BASEURL}/${path}`, { headers: { Cookie: `access_token=${accessToken}` }, withCredentials: true }) return res.data}

Using the wrapper ( event handler on page.tsx)

const getMeServer = async () => { const me = await getRequest('users/me') console.log(me)}

Axios Request Interceptor

First, we create a reusable Axios instance. Then, we set up a request interceptor that runs every time we use this Axios instance before sending a request. In the interceptor, we check whether an access token is present. If the access token is missing, we request a new one and attach it to the request.

Set up the interceptor

// utils/axios.ts'use server'import axios from "axios";import {cookies} from "next/headers";import {refreshServer} from "@/services/refresh";// baseURL handles both baseURLs in both frontend and backend (both docker and non docker)const axiosInstance = axios.create({ baseURL: process.env.API_BASEURL || process.env.NEXT_PUBLIC_API_BASEURL, withCredentials: true, headers: { 'Content-Type': 'application/json', }})axiosInstance.interceptors.request.use( async (config)=> { const accessToken = cookies().get('access_token')?.value || '' if(!accessToken) { await refreshServer() const newAccessToken = cookies().get('access_token')?.value || '' config.headers.Cookie = `access_token=${newAccessToken}` } else { config.headers.Cookie = `access_token=${accessToken}` } return config}, (error)=> { return Promise.reject(error)} )export default axiosInstance

In a server component, create a function to use the axios instance

// services/refresh.ts'use server'export const getRequestWithInterceptor = async (path: string) => { const res = await axiosInstance.get(path) return res.data}

Using the interceptor (event handler on page.tsx)

// pages.tsxconst getMeInterceptor = async () => { const me = await getRequestWithInterceptor('users/me') console.log(me)}

Note: The Axios interceptor doesnt seem to work when used directly in page.tsx, resulting in the following error.

TypeError: _utils_axios __WEBPACK_IMPORTED_MODULE_3__.default.get is not a function

Takeaways

I had fun working on this and learnt a few new things that I hadn't noticed before:

CORS issues are only applicable to client components; you will never get CORS error in server components.
Calling functions in files marked with use server doesnt automatically make them server actions.
We cannot directly import Auth.js's signIn, signOut in client components because they use next/header, so we need to make them server actions in auth-helper.ts

Useful Links

These additional resources helped me with implementing my solutions.