[{"_1":2,"_154":-5,"_155":-5},"loaderData",{"_3":4,"_13":14,"_21":22,"_133":134},"root",{"_5":-5,"_6":-7,"_7":8,"_9":-7,"_10":11,"_12":-7},"currentUser","primaryEmail","siteVerification","6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI","toast","enableDev",false,"incidentStatus","routes/_layout",{"_15":-5,"_16":17,"_18":17,"_19":11,"_20":11},"username","isAskGordonEnabled",true,"isUsingNewTemplate","showMinimalLanding","showHoneypotTrap","routes/_layout.r.$namespace.$reponame",{"_23":24,"_25":-5,"_26":11,"_27":11,"_28":29,"_30":31,"_32":-5,"_33":11,"_34":35,"_84":-5,"_85":86,"_124":-5,"_125":11,"_126":17,"_127":11,"_128":-5,"_129":11,"_130":-5,"_131":132},"canonicalUrl","https://hub.docker.com/r/rankun203/test-fullstack/tags","mcpServer","canSeeDockerfile","canSeeAutobuilds","namespace","rankun203","reponame","test-fullstack","cloudBuildSource","isAutobuildsAvailable","repo",{"_36":37,"_38":39,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":51,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":70,"_75":11,"_76":77,"_81":29,"_82":83},"categories",[],"content_types",[40],"image","date_registered","2019-11-20T20:35:11.354422Z","description","","is_private","last_updated","2019-12-16T01:43:17.536598Z","last_modified","2024-10-16T13:48:34.145251Z","media_types",[52],"application/vnd.docker.container.image.v1+json","name","pull_count",311,"repository_type","star_count",0,"status",1,"status_description","active","source","collaborator_count","full_description","# Lightning Talks Polling App\n\n## Wireframe & Design\n\nCheckout [lightning-talks-polling.fig](https://github.com/rankun203/test-fullstack/blob/master/docs/lightning-talks-polling.fig), use Figma to open it. Or use [this view only link](https://www.figma.com/file/yFqtpELaUl31Qe0GGXTsXR/Lightning-Talks-Polling).\n\nThis app was designed in a Mobile First approach.\n\n

\n\n## API\n\nAPI Documentation: [open-api.yaml](https://github.com/rankun203/test-fullstack/blob/master/docs/open-api.yaml), or use [this view only link](https://documenter.getpostman.com/view/4228/SW7c2n5Z).\n\n## Run This Project\n\n### Configuration\n\nEdit .env as well as server/.env:\n\n```bash\n# Configure frontend\ncp .env.sample .env\n\n# Configure backend\ncd server\ncp .env.sample .env\n# Or specify environment variables in docker run config\n```\n\nSetting Authorization callback URL: `https:///login/oauth/callback`.\n\nMind that you will need to specify `API_SERVER` for frontend and `FRONTEND_BASE_URL` for backend.\n\nYou can build the project locally and run it, or you can use the pre-built docker images to run.\n\n### Pre-built Docker Image\n\n```bash\nnpm run start:docker\n# Then navigate to http://localhost:8000 in your browser\n```\n\n### Build\n\n```bash\nnpm run start\n# Then navigate to http://localhost:1234 in your browser\n```\n\n## Containerization\n\nThis project includes `Dockerfile`s for each sub-project (client, server), and have a `docker-compose.yml` which you can use to quickly spin up an instance.\n\n## Deployment\n\nFor deployment, I'm using [this tool(reverse-proxy)](https://github.com/rankun203/reverse-proxy) I created to put it online.\n\nIf you are trying to use docker-compose.yml provided in this repo to deploy, keep in mind to add additional configs with a docker-compose.override.yml config.\n\nFor example:\n\n```yaml\nversion: '3.6'\nservices:\n frontend:\n labels:\n - 'traefik.enable=true'\n - 'traefik.backend=talks'\n - 'traefik.frontend.rule=Host:***.com'\n - 'traefik.port=80'\n api:\n environment:\n - 'OAUTH_GITHUB_CLIENT_ID='\n - 'OAUTH_GITHUB_CLIENT_SECRET='\n - 'FRONTEND_BASE_URL='\n labels:\n - 'traefik.enable=true'\n - 'traefik.backend=talks-api'\n - 'traefik.frontend.rule=Host:'\n - 'traefik.port='\n```\n\n## Tech Stack\n\n### Form Validation\n\nFor form data validation, I'm using [Yup](https://github.com/jquense/yup) as the schema validator, it works on both frontend and backend, compares to Joi, it's lighter and generally more friendly to use in browsers, and it supports backend as well, and it supports multiple languages.\n\nIn addition to that, I'm using [Formik](https://jaredpalmer.com/formik) to manage my form state and validates against schemas.\n\n### Error Handling\n\nServer side: Heavily influenced by this repo [Wiredcraft/service-error](https://github.com/Wiredcraft/service-error). it's what I considered a good practice. Extend from ExtendableError is easier to work with than extending from Error itself.\n\n### ID Generation\n\nUse [cuid](https://github.com/ericelliott/cuid)(by ericelliott) instead of uuid/v1 or uuid/v4. UUID is like USB Type-C connector, the shape looks the same but the implementation can be vastly different. cuid offers the same functionality as uuid/v1, so for this particular project I'll just use cuid for better recognizability.\n\nSimilar to MongoDB's Object ID, it also breaks down into different parts which is faster for binary search since some parts in the front won't change that often.\n\nThe implementation of ID generation can be easily swapped, checkout [server/src/utils/id.js](https://github.com/rankun203/test-fullstack/blob/master/server/src/utils/id.js).\n\n### Database\n\nUsing Redis as the only database, it works great for current requirement, but it's not so easy to work in the future. I haven't defined any database migration logic yet.\n\n### Authentication\n\nUsing Github as OAuth provider, since it doesn't support implicit grant yet, I'm implementing OAuth web application flow instead.\n\n- When a user login with GitHub, the api server will redirect the user to Github's authorize page\n- Then redirect back to api server with the `authorization code`\n- Then api server will try to obtain `access_token` for this user with that authorization code\n- Then api server will use the access token to get user's profile, which contains a login(username), and use that login as username in our system.\n- The api server then generates a new access token(jwt) for the user, the user will need to use this token for future requests\n- Till now, the only step which is missing is to pass that access token back to client side\n - Method 1 [Selected]: Redirect to frontend app with access token in the URL query parameter, this is similar to implicit grant, which has its own security issue\n - Method 2: Use session (not ideal, since it's not stateless).\n\n### Testing\n\n- Frontend: use Enzyme to test stateless components\n- Backend: use Jest to test `services`, `models`, `data-access` layers.\n\n### Frontend Overall Architecture\n\nUsing React Hooks in conjunction with useReducer(), useContext() to manage application state.\n\n### Backend Overall Architecture\n\nApplying practices of [Uncle Bob's clean architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html), but due to limited time I have to design the API system, the implementation is not so \"clean\" after all(e.g., db part) and should be considered twice if it's gonna be used in production in large scale.\n\nIt looks like Dependency Injection in a way, under each layer(folder), there is an [index.js](https://github.com/rankun203/test-fullstack/blob/master/server/src/modules/talks/models/index.js) to configure the dependencies for other functions in the same layer.\n\nThe benefits: Separation of concern and high flexibility for changing implementation of each layer, for example if we want to add another talks db layer, we can just add it in `data-access` layer and configure it under `services` layer's index.js file.\n\nThe drawback is there are much more boilerplate code, just to take care of different layers of a simple create talk action, it takes hundreds lines of code compares to tens of lines if we just want something quick.\n\n### JavaScript Code Style\n\nOn top of some of the best practices, here are a few opinionated JavaScript code style used in this project:\n\n- Use named exports over default exports\n- Normal functions and arrow functions both can be used, `function` keyword for easier naming and arrow functions for easier management of `this` scope.\n","has_starred","hub_user","immutable_tags_settings",{"_71":11,"_72":73},"enabled","rules",[74],".*","is_automated","permissions",{"_78":17,"_79":11,"_80":11},"read","write","admin","user","storage_size",16327183,"orgData","recentTags",[87],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":96,"_46":113,"_114":90,"_115":29,"_116":52,"_53":117,"_118":119,"_120":104,"_121":113,"_122":62,"_123":17},"content_type","creator",25433,"full_size",9044227,"id",77030835,"images",[97],{"_98":99,"_100":101,"_102":44,"_103":104,"_105":106,"_107":108,"_109":44,"_110":-5,"_111":92,"_59":62,"_112":-5},"architecture","amd64","digest","sha256:1c01734824fe19b16efe3f41e77b66a5a28ca764837c648abde8f4d197220117","features","last_pulled","2026-09-23T07:57:35.071548523Z","last_pushed","2019-12-16T01:43:18Z","os","linux","os_features","os_version","size","variant","2019-12-16T01:43:17.261441Z","last_updater","last_updater_username","media_type","latest","repository",8053271,"tag_last_pulled","tag_last_pushed","tag_status","v2","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","showSbxLogoOverride","sbxTrademarkText","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"routes/_layout.r.$namespace.$reponame.tags",{"_34":135,"_142":143,"_131":152,"_153":11},{"_36":136,"_38":137,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":138,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":139,"_75":11,"_76":141,"_81":29,"_82":83},[],[40],[52],{"_71":11,"_72":140},[74],{"_78":17,"_79":11,"_80":11},"tags",{"_144":60,"_145":-5,"_146":-5,"_147":148},"count","next","previous","results",[149],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":150,"_46":113,"_114":90,"_115":29,"_116":52,"_53":117,"_118":119,"_120":104,"_121":113,"_122":62,"_123":17},[151],{"_98":99,"_100":101,"_102":44,"_103":104,"_105":106,"_107":108,"_109":44,"_110":-5,"_111":92,"_59":62,"_112":-5},[],"canDeleteTags","actionData","errors"]

rankun203/test-fullstack

Tags for rankun203/test-fullstack