This is a Next.js project bootstrapped with
create-next-app.
- Next.js
- Typescript
- Bootstrap for css styles - do not write your own custom CSS unless it's absoultely needed. Take a look at bootstrap and the styles they provide.
- Sass
- React hook form
- [Prisma] (https://www.prisma.io/nextjs#nextjs-tabs) - ORM to connect to the database
- Postgres - Database language
- Heroku to host our codebase
- Docker
If you want to use another type of package, please check with us on our slack channel
Install the dependencies for the project with npm which is a shortcut for
npm install. npm is a package manager that
downloads packages from the npm Registry of open
source packages that can help with many development tasks from compiling your React app so that it downloads faster for users to converting time between timezones or replacing words written in English into Spanish, Swahili, or Mandarin.
You'll need to run npm (or npm install) often to keep up to date with the npm packages other people may be adding to the project or updating to keep the site secure. You can't run npm too many times so don't worry about that; once a day is a good habit, and if the app won't start start for some reason running npm to make sure your dependencies are up to date is always the first step in troubleshooting to fix things.
Create a .env file and add:
DATABASE_URL="postgres://bajeonmlxpbfdq:bbe0a9d989587bb4c4b66aac1c3e4c0af75f8347c0b6128e1bb7d2a8fbc213d7@ec2-3-214-136-47.compute-1.amazonaws.com:5432/d1p1l0ndqdjtj4"
We use prisma as an ORM to postgres to connect directly to the database. See example in index.tsx
Download the prisma studio to connect directly to the heroku database:
For development: we use prisma to connect to a heroku database on staging
npx prisma generate
Run npm run dev, then open http://localhost:3000
with your browser to see the result.
You can start editing the home page by modifying pages/index.js. 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.js.
The pages/api directory is mapped to /api/*. Files in this directory are
treated as API routes
instead of React pages.
TK note about mentors helping every step of the way as requested, invitation to ask lots of questions in Slack, read other people's code in code reviews, etc.....
All of these steps can be run in a single command: npm run ci-at-home if you
want to know ahead of time if a pull request will pass the checks.
We use Prettier to keep the code uniform and easy to
read following the StandardJS Styleguide . You can
check if your code will pass our testing
system's linting
step by running npm run lint (which in turn runs npx prettier .). If the
code doesn't pass you can fix many linting errors with npm run format
(npx prettier --write).
On the Prettier website you'll find lots of information
about plugins and extensions you can install for your text editor (we recommend
Visual Studio Code) that will automate
styling your code when you save or as you type, and don't forget about
npm run format.
Alice: It's really difficult to use typescript half way.... I'm gonna have to think about this one
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!
Node Resources:
React Resources: