Code Monkey home page Code Monkey logo

batnoter-api's Introduction

Create and store notes to your git repository!
https://batnoter.com

BatNoter

GitHub Workflow Status codecov Codacy Badge

BatNoter is a web application that allows users to store notes in their git repository. This is a frontend project built using mainly react (typescript), redux-toolkit & mui components. BatNoter API is the backend implementation of REST APIs which are used by this react app.

BatNoter Demo

Features

  • Login with GitHub.
  • Create, edit, delete, organize & explore notes easily with a nice & clean user interface.
  • Markdown format supported allowing users to add hyperlink, table, headings, code blocks, blockquote... etc inside notes.
  • Editor allows preview of markdown.
  • Quickly copy code from the code section using copy to clipboard button.
  • Store notes directly at the root or use folders to organize them (nesting supported).
  • Explore all the notes from a specific directory with single click.
  • All the notes are stored inside user's github repository.
  • Notes are cached to avoid additional API calls.
  • URLs can be bookmarked.
  • Dark/Light mode supported.

Local Development Setup

Prerequisites

  • Node.js version 18 or above

Start the server

npm install
npm start

This will start the react app in the development mode. Open http://localhost:3000 to view it in the browser.

Run tests

npm test

This will execute all the tests and also prints the code coverage percentage.

Contribution Guidelines

Every Contribution Makes a Difference

Read the Contribution Guidelines before you contribute.

Contributors

Thanks goes to these wonderful people ๐ŸŽ‰

batnoter-api's People

Contributors

vivekweb2013 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

batnoter-api's Issues

Support db migration through cobra command

Since the database config is already parsed with cobra initialisation, It would be easy to also run the migration with cobra command instead of running migration separately outside the application & passing the configuration repeatedly.

Login failing for user with public email protected in their github account

Some users set their public email visibility to "Don't show my email address" as shown in below picture.

image

The call to /user only returns the public email address, so if the user doesn't want it shown, the API will respect that. So even if you have set the email scope, the returned user object will not contain the email field.

To get the user's email addresses regardless of whether or not they are public, make an additional api call to /user/emails

This has to be implemented in the backend since user's email is a mandatory field.

Reference:
https://stackoverflow.com/questions/35373995/github-user-email-is-null-despite-useremail-scope

Enable cors to support external client

Currently there is no cors, so it is not possible to use different hosts from api and ui.
It works with kubernetes since there is an ingress controller which takes the responsibility of routing requests to appropriate api and ui pods

But I'm thinking of using github pages for deploying frontend and heroku for deploying api server.
For this to work I will need to setup cors and allow configuring the client url to enable cors for that host.

There is one more issue - sending app jwt using response payload will no longer work now. Because the response payload which has the javascript to store the token to localhost will eventually store the token under api host's local storage and ui will no longer be able to access this token. This was currently working since we were using api proxy at the frontend side but with github pages we can not run a proxy server with react app. Github will only host static pages.

Because we use oauth flow and we can not send data with redirect response I'm thinking of using cookie for sending token initially with the redirect call. Then I need to create a separate endpoint /api/token to read the token cookie from request and send it as response payload. Since the call to /api/token is made with fetch ajax call we will be able to read the token and store it into local storage of ui domain. This token can later be used with consecutive ajax calls using authorisation token. It's worth doing this since I do not want to use the app's jwt token using cookies because of security issues. Its always better to use authorisation header instead

Prepare app for heroku deployment

There are two issues with heroku docker deployment, the following explains the issues and ways to solve them

1] Issue with using port

Heroku dynamically generates the port and provide $PORT environment variable to use this port with web application. The app can not use any port other than the one pointed by $PORT env variable. If the application is not bound to $PORT then the app will crash.

The gitnoter application can read port from env variable but the env variable should be $HTTPSERVER_PORT and not $PORT.

Solution
One solution is to simply change the config to read from $PORT instead of $HTTPSERVER_PORT but this approach does not look good to me as the config variable must use specific names otherwise they would get so confusing.

The other solution is to use .profile containing export HTTPSERVER_PORT=$PORT which is sourced after the appโ€™s config vars. But this solution only works for repository deployment type and not for the container stack.

The configs setup in the heroku app will be available to the application. So I've tried creating HTTPSERVER_PORT config and set its value as $PORT inside heroku app setting but heroku does not evaluate the variable and application will fail with below error

Error: listen tcp: address tcp/$PORT: unknown port

The solution that would work for this issue is to update the config parsing mechanism in golang. Check if the value of http server port config starts with a $, if yes then evaluate the get the value of that env variable using golang and assign it to the config. This way if HTTPSERVER_PORT config is assigned value as $PORT then go will read the $PORT value at runtime and assign to the port config

2] Issue with database

In the free plan, heroku occasionally puts the database in maintainance mode
Once maintenance has completed, database is up again but the database credentials will be changed. So the app has to use the new database credentials.
Luckily it provides the $DATABASE_URL env variable which contains the latest credentials

Solution
Update the config parsing logic to parse $DATABASE_URL value and override the db configs like dbname, username, password, port etc with their respective values from connection string pointed by $DATABASE_URL

Load config with viper and enviper

We can use viper for loading configuration from file/environment but the problem is that viper requires the Config struct fields to be tagged with mapstructure which looks ugly and is a maintenance headache

So the solution is to use enviper which is a wrapper on viper which does not requires any tagging to load config from env variables.
It first checks for availability of the config file. If present loads the config from it and overrides any configuration that is stored with env variables.

enviper does not through any error in case the config file is missing, instead it simply tries to load from env variables if present.

SameSite=None is an issue in chrome incognito mode

Describe the bug
From Chrome v83 and above third-party cookies blocked in Incognito

And Google intend to making this the default behaviour in the future.
Reference

So even if SameSite is set to None the cookie won't be sent to third party site when using incognito mode
image

Since we use gitnoter.herokuapp.com as a API server, all the ajax calls made to gitnoter.herokuapp.com from gitnoter.com considers gitnoter.herokuapp.com as third party and will not send the cookies (even if cookies are set to Domain=gitnoter.herokuapp.com SameSite=None and Secure=true)

The only solution is to ask user to allow third party cookies in incognito mode
image
This solution is not very convenient.

I'm now thinking its better to use the same domain for both api and ui. But how can we do it if we are using heroku for api and github pages for ui?
I think the solution is simple - use a subdomain for api

For example api.gitnoter.com can be configured with heroku to serve the api. Since a subdomain is not considered as a different site.

This way we have the root domain used with github pages to serve the ui and subdomain used with heroku to serve the apis

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.