It's where YouTube meets the code editor. YouCoder is an innovative platform designed for creating and sharing interactive code lessons. It's also a place for discovering and learning from a variety of tutorials. Code and explain your process in one go.
YouCoder equips content creators with easy-to-use tools to create dynamic coding lessons:
- Choose from a multitude of programming languages, including a multi-edit mode for HTML, CSS, and JavaScript.
- Pause your recording anytime to fix errors and continue seamlessly.
- The output of your executed code during the recording will be displayed during playback.
- Upon finishing your recording, you'll be directed to your dashboard where you can manage your content. Modify recording details and determine which lessons should be publicly accessible.
- Share your work by providing a link to your lessons on our site, or copy an iframe tag to embed your recording on any other platform.
The Discover page is your starting point if you're here to learn:
- Explore and search for lessons from various content creators.
- Enjoy complete control over the lesson playback - pause, play, and navigate to any part of the code.
- Pause and interact with the code, modify it, execute it, and view the output.
- Resume the lesson from where you left off.
- If the coding panels seem too cramped, simply drag the edges to resize them to your preference.
Embedding a YouCoder lesson into your website or platform is a breeze. Simply copy the provided embed code and paste it into your desired location for a seamless and visually appealing integration of your coding sessions.
YouCoder is a platform made for everyone - students, teachers, and professionals alike. Whether you're just starting out or aiming to improve your skills, YouCoder has got you covered. Welcome to a world of interactive coding lessons!
Youcoder's frontend is built with the following:
This project was built using Vite, with Tailwind. Please follow these steps to host the frontend locally:
cd client
- move into client directory
npm install
- install all dependencies
npm run dev
- Starts the development server and compiles the code using Vite's development-time bundling
npm run build
- Creates a production ready version of the app
npm run preview
- Starts a development server that serves the production-ready files generated by running the build script
YouCoder's server is currently built and tested with the following:
This project requires certain configuration variables to be set in a '.env' file. It is used to store sensitive information or configuration variables, and keep it separate from the codebase. Please follow these steps to create your own '.env' file:
- Move into the server directory:
cd server
- Copy the 'example.env' file to a new file called '.env':
cp .env.example .env
- Replace the placeholder values in '.env' with your own values.
- RAPIDAPI_KEY: Your Judge0 API key.
- RAPIDAPI_HOST: The host url for Judge0 on RapidAPI.
- PORT: The port number that the server should listen on.
- DATABASE_URL: Insert the URL to your Postgresql database.
- FIREBASE_PROJECT_ID: Generate a private key file for your project on Firebase, and insert the 'project_id' here.
- FIREBASE_CLIENT_EMAIL: Insert your Firebase project 'client_email' here.
- FIREBASE_PRIVATE_KEY: Insert your Firebase project 'private_key' here.
- Save the '.env' file. Ensure it's in the server directory of the project.
Note: Do not commit the '.env' file to version control! It will likely contain sensitive information.
- Install all the relevant dependencies:
npm install
npm run build
- cleans the /build folder if it exists, then builds the app JS there.
npm run start:dev
- Runs 'npm run build' then starts the application in development using nodemon and ts-node.
npm run start
- Starts the app in production by first building the project with
npm run build, and then executing the compiled JavaScript at build/index.js.
npm test
- Runs the included test suite using Jest.