Drawshare is an app for sharing sketches.

🧪 Experimental: This project is not meant to be deployed to production, and is simply a learning exercise.

Prerequisites: Node.js v14

If you have NVM installed, you can run:

nvm install

Then, in one terminal start up the API server:

cd api
npm install
npm start

In another terminal, start up the web app:

cd web
npm install
npm run build
npm start

The frontend was built with React and Next.js, while the backend was built with Express and Feathers.

Located in the web directory. Major parts of the file structure:

.
├── ./components: presentational components
├── ./contexts: global data
├── ./features: business logic
├── ./pages: file-based routes
├── ./public: static files
└── ./api.js: api client

Major parts of the stack:

• Next.js: a React framework with (SSR) server side rendering. Provides some opinions such as file-based routing so that developers who are already familiar with Next.js can contribute right away.
• Chakra UI: a component library which provides a set of accessible, themable, and composable blocks. Not having to focus on building a design system helps speed up development of business features.
• Formik: a form library to help simplify state management for forms.
• TypeScript: Next.js supports TypeScript, and enabled strict mode improves stability.

This stack works well to develop a maintainable codebase by standardizing how the UI is built. The low amount of custom components and overall code helps prove this.

The messiest part of the codebase is the <Draw> component as it contains all the complexities of the canvas drawing functionality. It also is tied to the business logic of saving the drawing to the API, which if refactored should be passed as a callback prop to a presentational component instead. However, this component works well for the current MVP and any abstractions may be too early.

To save extra development time, data fetching was done via the Feathers Client. This could be drammatically improved in terms of security by not persisting the authentication token (JWT) to localStorage. Instead, the JWT should be stored in a secure HTTP-only cookie. React Query could also be used here to add caching and simplify state management of data.

Also while I attempted to write components to be testable (mainly by abstracting logic to hooks), actually writing tests with Jest and Testing Library would probably uncover more issues that would help improve the codebase.

Located in the api directory. Major parts of the file structure:

.
├── ./config: environment-based configuration
├── ./data: nedb file-based database
├── ./public: static files
└── ./src/
    ├── ./src/models: database models
    └── ./src/services: api endpoints

Major parts of the stack:

• Feathers: a Node.js framework with Express integration. This helped initial development going very quickly by allowing quick scaffolding of authentication and CRUD endpoints.
• NeDB: a file-based database to help simplify setup. All database adapters in Feathers support a common API which makes swapping databases possible. For production use, I would instead use PostgreSQL as I find relational databases more easily scalable.
• TypeScript: Next.js supports TypeScript, and enabled strict mode improves stability.

This stack works well to develop a quick MVP, but is missing common requirements of APIs such as an access control system. I implemented some basic validation and ownership checks which you can see in the users hooks and drawings hooks.

I would implement a role-based system using feathers-permissions and add unit tests to ensure that future code changes would not break security of the API.

All endpoints are RESTful and respond with a 200 status code on success, or 201 status code on successfully created entities. See the Feathers Services Docs for more, as well as the api/src/services directory.

• URL: http://localhost:3030/users
• Method: POST
• JSON Payload:

{
    "email": "[email protected]",
    "password": "test",
    "username": "sunny"
}

• URL: http://localhost:3030/authentication
• Method: POST
• JSON Payload:

{
    "email": "[email protected]",
    "password": "test",
    "strategy": "local"
}

• URL: http://localhost:3030/drawings
• Method: POST
• JSON Payload:

{
    "username": "sunny",
    "steps": [
        {
            "fromX":24,
            "fromY":60,
            "toX":28,
            "toY":73,
            "color":"#000000",
            "strokeWidth":5
        }
    ],
    "createdAt":1615901840380,
    "drawTime":4138,
    "isPublic":true
}

• URL: http://localhost:3030/drawings/<ID>
• Method: DELETE

• URL: http://localhost:3030/drawings/<ID>
• Method: GET
• JSON Response:

{
    "username": "sunny",
    "steps": [
    {
        "fromX": 24,
        "fromY": 60,
        "toX": 28,
        "toY": 73,
        "color": "#000000",
        "strokeWidth": 5
    }
    ],
    "createdAt": 1615862444911,
    "drawTime": 1518,
    "isPublic": true,
    "userId": "n9bq8CtYrvK48ZyK",
    "_id": "bJd3ixeRSXIPcwf6"
}

Refer to Feathers Querying Docs for more complex queries.

• URL: http://localhost:3030/drawings?isPublic=true
• Method: GET
• JSON Response:

{
  "total": 1,
  "limit": 10,
  "skip": 0,
  "data": [
    {
      "username": "sunny",
      "steps": [
        {
          "fromX": 24,
          "fromY": 60,
          "toX": 28,
          "toY": 73,
          "color": "#000000",
          "strokeWidth": 5
        }
      ],
      "createdAt": 1615862444911,
      "drawTime": 1518,
      "isPublic": true,
      "userId": "n9bq8CtYrvK48ZyK",
      "_id": "bJd3ixeRSXIPcwf6"
    }
  ]
}