Code-flow

Introduction

CodeFlow is an online repository and compiler platform designed for practicing JavaScript, CSS, and HTML tech stacks. Improve your coding skills, collaborate with your friends, and let CodeFlow help you enhance your coding abilities.

Project Type

The project is a full-stack application that includes both frontend and backend components, primarily using MongoDB, Node.js, React, JavaScript, HTML, and CSS as frameworks.

Deployed App

Both the front-end and Backend server have been deployed using render.com. The deployed links can be accessed below.

*Frontend: [https://code-flow-woy3.vercel.app/] *Backend: [https://codeflow-ujkh.onrender.com]

Objective

This project was created to put into practice the coding and problem-solving skills learned at Masai School and to collaborate to create a fully functioning website. The project was created during Construct Week here at Masai, completed in just 5 days, and served as a collaborative tool to explore, learn, and grow.

Drectory Structure

Video Walkthrough of the Project

• A YouTube video explaining the entire project and showcasing the features and functionalities can be accessed here:[https://www.youtube.com/watch?v=g_7OmOx2uto]

Video Walkthrough of the CodeBase

• A walkthrough of the codebase and the folder structure can be accessed here on YouTube:[https://www.youtube.com/watch?v=HqUlMu0tg0k]

Installation and Getting Started

• After downloading the project, follow these steps to get the project up and running :
  • ude cd Frontend to re directed to the project folder
  • ude npm install to instal node-modules to run the project server.
  • use npm run dev to start thye server and open in web browser.

Features

Sure! Here are four features of CodeFlow: Real-time Collaboration: Work with your friends and peers in real-time, allowing for seamless coding sessions and instant feedback.

● Integrated Compiler: Instantly compile and run your JavaScript, CSS, and HTML code within the platform, making it easy to test and debug your projects.

● Project Repository: Store and manage your coding projects in an organized repository, ensuring your work is always accessible and backed up.

● Skill Enhancement Tools: Access a variety of tools and resources designed to help you improve your coding skills, including tutorials, code reviews, and practice challenges.

Usage

• Regular Functionalities: Get started on the landing page where you can see the Navbar with logo and login/Signup page.

Compailer page:

Generate new room:

Share Your roomid is with your frends and connect with your frends:

My-codes page:

Save Your code:

Share your codde with your frends:

Technology Stack

• HTML
• CSS
• JavaScript
• React Library
• Node Js
• MongoDB