CTP Portable

GIF
Presentation

Inspiration

When we were brainstorming ideas to hack the home learning environment, we realized that we relied on several apps and websites to communicate with students and manage our tasks. Keeping track of our responsibilities is already complicated! As the upcoming cohort of CUNY Tech Prep, we wanted to find a way to monitor our work and connect with fellows in one space. This is where CTP-Portable comes in!

What it does

CTP Portable is the app where CTP fellows can check their tasks, converse with other fellows/mentor, and learn more about their up-coming CTP Sessions! The app contains the following features:

Dashboard with upcoming assignments/course completion details.
Sessions to inform fellows of upcoming workshops.
Study groups to connect with fellows and prepare for technical interviews.
Mentors page to reach out to CTP Staff!

How we built it

The CTP Portable app and website interfaces were designed using Adobe XD. The app was built using Flutter(cross-platform mobile dev SDK), Dart, Google Cloud Platform, and REST API. The website was built using React.js, CSS Keyframes Animation.

Hours

We took about 30 hours for the project, from design to the project demo!

Challenges we ran into

We ran into some challenges with the mobile app. Challenges such as, implementing modular dart code that reacts to dynamic state changes from our custom REST API, and rebuilds itself accordingly. This prevented the app from following some specific designs in the UI. While we had taken the time to brainstorm our plan, it was also difficult to manage our time and multitask. We had to manage design and code simultaneously and create several assets such as menus and animations. Our team had to find ways of translating the design into code.

Accomplishments

We learned how to create an application from the design to the actual product! One of our team members got to learn React.js throughout the course of the project! Our app also included all four main features we planned for. Additionally, we got to create an educational website- one of our stretch goals! We got to implement fun CSS animations as well. Most importantly, we were ambitious enough to take on this challenge!

What's next for CTP Portable?

We hope to make the CTP Portable website responsive so it can be navigated through various screen sizes. It would also be great to have a user base for the app.

Built With

Submitted to

ctpHomeHacks
- Winner Students Choice

Created by

I designed the mobile app's UI using Adobe XD. This is my first time working closely with developers as a UI Designer!

Kristy Lau
An aspiring Product Designer and Front-End Developer, Hunter College '22!
I built the mobile app using Flutter, GCP, and fine tuned the REST API. Oh yeah, this was my first first time working on back-end.

Joy Paul
I worked on the front-end for the landing page.It was my first time using React.js, which became a little challenging. But learned a lot about React and the Github dynamic works!

Ruben Vecino
I worked on a bit of the back end by building Express API with NodeJS and designed the landing page and helped to code components with React.js, CSS, and JavaScript.

Anastasiya Uraleva