coinlist-frontend v0.2.0
coinlist-frontend
New CoinList Frontend
This is a Next.js project bootstrapped with
create-next-app
.
Background
This is a work in progress to implement this engineering design, and this UX design.
Getting Started (Docker -- Recommended)
Prerequisites
- The current setup requires for a bridge network
coinlist
to be setup for the app to use, ways you can set this up are either- Pull and use coinlist nginx-proxy
- If you don't want to use the proxy for whatever reason then adding a blank network with docker by running
docker network create coinlist
will allow for you to not setup nginx-proxy
- Install docker desktop please make sure that
docker compose version
returns something more modern than2.3
- Ensure
127.0.0.1 coinlist.localhost
is a line in your/etc/hosts
file - Run
yarn husky:prepare
to setup the linter. - Insert any needed API keys within .env.local
Run development server
Add door keeper application to the compliance on your local
Doorkeeper::Application.create(
name: "coinlist-frontend",
redirect_uri: "http://localhost:3000/oauth/callback",
scopes: "default frontend"
)
NOTE : Currently the graphql endpoint is setup to check for gaming
scope and not frontend
scope. You can either change the compliance to check for :frontend
scope or change the scope of doorker to gaming
. Either works.
One more problem you'll run into for now is CORS. Edit cors.rb
in compliance to add http://localhost:3000
so that you can access graphql from your localhost server.
To get started you can use the makefile by running
make up
This will build a development container of the application and start to run the server. After the server has started it can be accessed by going to http://new.coinlist.localhost if you're running the coinlist proxy. else you can access the website at http://coinlist.localhost:3000
continue exploring the application here
Regenerate container
If the node dependencies update then the docker container will need to be regenerated. This can be accomplished by running
make reset
Getting Started (Non-Containerized -- Please Don't)
Recommend using asdf for node version manager.
asdf plugin add nodejs
asdf install nodejs
Here is a good blog outlining basic use cases for getting started with asdf and node.
First, install the required dependencies:
yarn install
Next, run the development server:
yarn dev
After Running
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This
endpoint can be edited in pages/api/hello.ts
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as
API routes instead of React pages.
GraphQL
To auto generate code from the embedded server run yarn run codegen
.
You can execute your query inside of VSCode
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Cypress e2e tests
To run cypress tests locally run
yarn cypress:run:local
If you want the cypress app to visually see and develop your tests
yarn cypress:open
Translations
Majority of Coinlist users live outside of US. Inorder to provide native experience for them we make translation a first class citizen from day one. How to implement i18next for the component you are building ?
public/locales/
contains the various languages. We default to/fallback to en
for now and rest are empty.
Step 1 : Create a file if you need a specific namespace (recommended) for your page. Like mypage.json
Step 2 : Add the key:value pair in there. {"my_name_is": "slim_shady"}
Step 3 : Each page level file requires a serverSideTranslations
from next-i18next/serverSideTranslations
which does the job of fetching those name space files.
Step 4 : Next js routing provides you the lcoal throught he context of getStaticProps
or getServerSideProps
Step 5 : Use the useTranslation
from i18n-next
, which provides us with t
function.
Step 6 : Then use the t{'my_name_is'}
to display on the browser.
Step 7 : To test you can force language by going to /two_digit_language_code/my_route
, this is automatically taken care by nextjs.
Read more on next-i18next here Read more on i18next here
GraphQL
We currently support 2 ways to query :
- local environment : embedded graphql with mockserver & direct local compliance server
- prod environment : compliance only
Here is the workflow if you are involved in graphql changes :
- did you make a recent compliance type change and expecting it to reflect ?
run bin/get_graphql_schema_from_compliance
This will copy over schema.graphq
l and schema.json
files to graphql/compliance/schema
folder. This is what is used to validate your queries and mutations you write on the client.
- you just want to create another query on an existing type ?
run yarn codegen:hooks
This will create the types and react query hooks for you. Note : the get_graphql_schema_from_compliance
also runs the same command at the end after copying over the files.
- oh, so you want to use the Altair client ?
To do this against compliance use the below url :
http://coinlist.localhost:19000/graphql
Add headers by clicking on the Set Headers
Icon on the left hand side pane. (first one at the time of writing)
x-compliance-graphql-api-secret
Look for the value in the env.development file.
Client on the Settings
Icon on the top right corner of the screen and enable this checkbox :
Send requests with credentials (cookies)
Why did do you need this ? This sends the client cookies to the server request on each call. Without it you'll get UnAuthorized errors.
NOW Login to the http://coinlist.localhost:19000/
as Admin or User.
Altair Client
To use the Altair Client, you'll need to set the header X-Compliance-GraphQL-API-Secret
with the secret. Retrieve the secret from AWS Secret Manager, following the link from Opal. Additionally you'll need to set Send requests with credentials (cookies)
in Altair Client Settings to true
.
Bundle Analyzer
yarn run analyze
will trigger the NextJS Webpack Bundle Analyzer. Keeping the bundle size as small as possible will help performance.
The analyzer creates a server.html
and client.html
file. We care mostly about the client side bundle because it impacts browser performance.
Recommended VS Code settings
We recommend having the following in your .vscode/settings.json to perform formatting cleanup + import cleanup actions on saves.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
15 days ago