NoteCode App

Sharing your code with others

This is a solution to the Code Sharing App.

Table of contents

• NoteCode App
  • Sharing your code with others
  • Table of contents
  • Overview
    • The challenge
    • Screenshots
    • Mobile 375px
    • Mobile 430px
    • Nest Hub Max 1280
    • MacBook Pro 1440
  • My process
    • Built with
    • State
  • Author

Overview

The challenge

This challenge is an excellent opportunity for Fullstack developers to test their basic skills by creating a simple code-sharing application called NoteCode. The application will allow users to store and share coding snippets, and it will require the use of both front-end and back-end development skills.

User Stories:

• Create a Coding Sharing App following the given design
• By default, users should see an HTML given snippet.
• When users select the "Share" button, a new ID should ne generated, and users can access the saved code with the generated ID.
• After code is sabed and shared, "shared" button should be disabled until users make an edit.
• Users can choose the language and theme they want to save and share. -- Working
• The application should be responsive on all devices.

Screenshots

Mobile 375px

Mobile 430px

Nest Hub Max 1280

MacBook Pro 1440

My process

Built with

Front-End:

• React - JS library
• Tailwind
• Zustand
• Typescript
• Mobile-first workflow
• Monaco Editor
• React-router
• Tanstack Query
• uuid
• React-hot-toast

Back-End:

• Node.js - JS runtime
• Express - Node.js framework
• MongoDB - NoSQL database
• Mongoose - Node.js ORM
• Winston - Logging framework

State

Global state on client-side is managed with Zustand.-

Author

• Linkedin - Gonzalo