ish-u / naya-sketch

Full Stack Engineer Assignment for https://naya.studio/

naya-sketch

A Collaborative Sketch Tool made using PixiJS, React, Express, SocketIO and TailwindCSS

---

Live Demo - https://naya-sketch.up.railway.app/

---

Table Of Contents

• Setup Local Development
• API Documentation
• Socket.IO Events Documentation
• Front-End Docs
• References
• Video Demo

---

Setup Local Development

Clone the Repository and cd to to naya-sketch

git clone https://github.com/ish-u/naya-sketch.git
cd naya-sketch

Install Dependencies for server and client

npm run init

Set Up Environment Variables for client and server

• Server

  • Create a .env file in the server folder

  • Copy the variables from .env.sample to .env and fill the required variables

  • Setup MongoDB and obtain the Connection URI

    • Get the MONGO DB URI using Atlas - Atlas UI
    • Set up docker and use the docker-compse.yml file provided in database folder to run MongoDB in a docker container
      • Get the MONGO DB URI of the running docker container
      • Run npm run db in naya-sketch to start the container - DB credentials can be found in database/docker-compose.yml
    • Get the URI from loacally installed MongoDB

  • Generate SESSION SECRET using by running require('crypto').randomBytes(64).toString('hex') in node console

  • Set DB_NAME to naya-sketch

  • The Final .env will look like this

    DEV=TRUE
    PORT=5000
    SOCKET_PORT=8000
    DB_URI="MONGO DB URI"
    DB_NAME="DB_NAME"
    SESSION_SECRET="SECRET"
    FRONTEND=http://localhost:5173
    
    

• Client

  • Create a .env file in client folder and add the following to it

    VITE_APP_API=http://localhost:5000
    VITE_APP_SOCKET=http://localhost:8000
    

Start Client and Server

• Server

  • Run the npm run server in naya-sketch folder to start the development server
  • The Express Server will be Live at http://localhost:5000
  • The SocketIO Server will be live at http://localhost:8000

• Client

  • Run the npm run client in naya-sketch folder to start the development server
  • The Client will be Live at http://localhost:5713

API DOCS

• /login
• /register
• /logout
• /user
• /sketch/get/:sketch-name
• /sktech/list
• /sketch/create/:sketch-name
• /sketch/update

SOCKET.IO EVENTS

• "send-point"
• "get-point"
• "join-room"
• "leave-room"
• "connect"
• "add-sketch"
• "new-sketch"
• "add-user"
• "remove-user"
• "update-user"
• "update-me"

FRONT-END DOCS

References

1. PixiJS - Link
2. passportjs - Link
3. mongoose - Link
4. tailwindcss - Link
5. socket.io - Link
6. vite - Link

Youtube Video Demo - Link