- staging: https://marketplace-client-staging.herokuapp.com
- production: https://marketplace.redis.com/
Create a .env.local
file with an API_URL
:
cp .env.example .env.local
-
Start the API and a Redis container locally: Backend with Redisearch
-
Run the development server:
npm run dev
- Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js
. The page auto-updates as you edit the file.
git add -A
git commit - 'message'
git push origin main
Pushing to main will deploy to staging automatically.
https://dashboard.heroku.com/apps/marketplace-client-staging
git checkout main
git pull origin main
git checkout production
git merge main
git push origin production
Pushing to production will trigger a build and deploy automatically to the production app.
https://dashboard.heroku.com/apps/marketplace-client-production
API_URL
: The URI for the backend application. (E.g. the staging URI:https://marketplace-backend-staging-a.herokuapp.com/
)
In heroku this is configured at: https://dashboard.heroku.com/apps/marketplace-client-staging/settings
Our index page. It handles the project filtering and querying and mounts the core blocks of the app:
- Static Header with a menu bar
- Hero with the search bar
- Filter bar with tags on the left side of the page.
- Tag bar with chips for the applied filters above the browser.
- Browser with the query results
- Pagination at the bottom of the browser
- Loading up the linked sample project if there is any in the query param.
The page has server side rendering enabled with the exported getServerSideProps
next.js function, which loads in the dynamic filters, the linked app from the query and the first /projects
query server side.
Here we store all the React components the index page is using.
It contains custom react hooks. We currently only have one for fetching the API.
Styling settings (colors, spacing) for Material UI.
Axios setup to communicate with the API.
This repo has automatic staging and production deployment turned on via Heroku. Every commit to the main
branch also deploys the application to staging, every commit to the production
branch also deploys the application to production.
You can test out the built code locally with the following commands.
Build the code
npm run build
Start the app
npm run start -p 3000
This project uses eslint and prettier to keep the code formatting and style consistent. If you are using VSCode, it should automatically format and lint everything on save.
To run the linter manually use:
npm run lint
To run the formatter manually use:
npm run format
Husky should also automatically format and lint everything before a commit.
To create a marketplace site so developers can search and browse through various Redis sample projects and find specific examples for their needs with the help of Redisearch.