This is the frontend for the Grin app. Grin app concept came from an idea of a blog, but that no one else will see. It was inspired after seeing someone that has a private twitter account with no followers, using it like a diary, but in the format of tweets. I found it an interesting application to create at the time.
The application is divided in two parts, the backend made in Go(lang) and the frontend made with Javascript and React (in particular, NextJS). It has a design resembling typewritters (somewhat like a typed diary). It was a great learning exercise, to create a reactive website with multiple pages and also learn a little bit about authorization and session management. The app is deployed on http://grin-web.vercel.app/, although it will not be functional since the API is needed and I didn't find somewhere to host it (the heroku server stops after some inactive time).
This is a Next.js project bootstrapped with create-next-app.
(main page)
(login page)
(user creation page)
It is possible to host the website locally. Running this way allows you to also run the API server and see the website's functioning. In order to run this you need npm and nodejs installed in your machine and to run the server you need the golang compiler. To run grin-web you just need to run npm run dev. And to run the api you need to clone the grin project (https://github.com/SunkPlane29/grin) and type the commands:
make cert
make run & make run-auth
(on linux)
First, run the development server:
npm run dev
# or
yarn devOpen 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.
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.
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!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.