Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gonferreyra/note-code

NoteCode - simple code sharing app. It allows users to type code snippets, in HTML and Javascript, which can be shared with another user through a link and modified by any user.
https://github.com/gonferreyra/note-code

express monaco-editor mongodb mongoose nodejs react react-router tailwind tanstack-query typescript zustand

Last synced: 24 days ago
JSON representation

NoteCode - simple code sharing app. It allows users to type code snippets, in HTML and Javascript, which can be shared with another user through a link and modified by any user.

Host: GitHub
URL: https://github.com/gonferreyra/note-code
Owner: gonferreyra
Created: 2024-08-29T13:13:06.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-09-10T19:34:45.000Z (about 2 months ago)
Last Synced: 2024-10-02T05:20:55.141Z (about 1 month ago)
Topics: express, monaco-editor, mongodb, mongoose, nodejs, react, react-router, tailwind, tanstack-query, typescript, zustand
Language: TypeScript
Homepage:
Size: 1.3 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # NoteCode App

## Sharing your code with others

This is a solution to the [Code Sharing App](https://devchallenges.io/challenge/code-shraing-app-note-code).

## Table of contents

- [NoteCode App](#notecode-app)

  - [Sharing your code with others](#sharing-your-code-with-others)

  - [Table of contents](#table-of-contents)

  - [Overview](#overview)

    - [The challenge](#the-challenge)

    - [Screenshots](#screenshots)

    - [Mobile 375px](#mobile-375px)

    - [Mobile 430px](#mobile-430px)

    - [Nest Hub Max 1280](#nest-hub-max-1280)

    - [MacBook Pro 1440](#macbook-pro-1440)

  - [My process](#my-process)

    - [Built with](#built-with)

    - [State](#state)

  - [Author](#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](client/preview/iPhone%206-7-8-1725390605514.jpeg)

### Mobile 430px

![mobile](client/preview/iPhone%2014%20Pro%20Max-1725390628392.jpeg)

### Nest Hub Max 1280

![desktop](client/preview/Nest%20Hub%20Max-1725996655518.jpeg)

### MacBook Pro 1440

![desktop](client/preview/MacBook%20Pro-1725390822804.jpeg)

## My process

### Built with

Front-End:

- [React](https://reactjs.org/) - JS library

- [Tailwind](https://tailwindcss.com/)

- [Zustand](https://zustand-demo.pmnd.rs/)

- Typescript

- Mobile-first workflow

- Monaco Editor

- React-router

- Tanstack Query

- uuid

- React-hot-toast

Back-End:

- [Node.js](https://nodejs.org/en/) - JS runtime

- [Express](https://expressjs.com/) - Node.js framework

- [MongoDB](https://www.mongodb.com/) - NoSQL database

- [Mongoose](https://mongoosejs.com/) - Node.js ORM

- Winston - Logging framework

### State

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

## Author

- Linkedin - [Gonzalo](https://www.linkedin.com/in/ferreyragonzalo/)