LiteraLingo is a service to help individuals with autism learn figurative language.
To run the app, follow these steps:
# Clone the repository
git clone https://github.com/Angelawork/LiteraLingo_H4I_Project.git
# Navigate to the project directory
cd LiteraLingo_H4I_Project
# Check that Docker is installed
docker -v
# Start the frontend
# Install dependencies
npm i
# Add the appropriate environment variables in the .env file
# For NEXTAUTH_SECRET, run the following in the terminal and paste the output
openssl rand -base64 32
# For GOOGLE_CLIENT_ID/GOOGLE_CLIENT_SECRET, you must generate Google Cloud OAuth 2.0 Client IDs. See details below (https://console.cloud.google.com)
# Once you've done so, paste them in
# Start the dev server
npm run dev
# Start the backend
# Ensure your PostgreSQL CLI is set up correctly by creating a role, password, and database corresponding to the connection string in .env (database should be called literalingo, username can be postgres, password can be password123)
# Run the following script to start the containerized backend
./start-database.sh
# if you're on windows, to create the docker image, use
docker run -d --name literalingo-postgres -e POSTGRES_USER="postgres" -e POSTGRES_PASSWORD=PASSWORD -e POSTGRES_DB=literalingo -p 8800:5432 docker.io/postgres
# Connect to your database via the CLI with:
psql <your-connection-string-here> OR
psql -U postgres -D literalingo
# Grant permissions to yourself from your superuser:
# example below: if your username is postgres:
GRANT CREATE ON SCHEMA public TO postgres;
# Ensure you can create a table by running:
CREATE TABLE xyz (a VARCHAR(100));
# Verify the table was created with:
\dt
# If successful, delete the table with:
DROP xyz;
# Sync up your Prisma schema with your db
npx prisma db push
Use Prettier for formatting. The default settings are fine.
Ensure that your component is declared in the following way for faster TypeScript compilation speeds:
export const ComponentName: React.FC<ComponentNameProps> = ({ ...props... }) => {}
Components and their corresponding styling files are stored in the same directory for ease of use and development under the src/app/_components directory
To create a page, create a file called page.tsx in a new directory under src/app. The name of the folder will correspond to the URL endpoint of the page. For example, if you create a directory called scr/app/users, then you access the content of this directory on the browser under localhost:3000/users. The newly created page.tsx tells Next.js what the main content of the page at that URL will be.
For more information about dynamic page routing, see the Next.js docs
Open Google Cloud Console, create a project, and create an OAuth consent screen. Add your own Google Account as a test user.
Switch to the credentials page, click create credentials, then OAuth Client ID. Set Application type to Web Application, http://localhost:3000 as an authorized JavaScript origin, and http://localhost:3000/api/auth/callback/google as an Authorized Redirect URL.
Register a developer application and retrieve your client ID and client secret. In the OAuth2 tab of your newly registed application, Add http://localhost:3000/api/auth/callback/discord as a Redirect URL.
View the example file in src/app/_components/user.tsx for an example about how you can make an endpoint call from the frontend.
To test an endpoint, send a request to localhost:3000/api/trpc/{ROUTERNAME}.{ROUTERMETHODNAME}?batch=1
If you're sending a POST request, the payload must be appended to the URL as &input={...} rather than sent as part of the request body.
For example, to say hello to a user based on their name, send a GET request to http://localhost:3000/api/trpc/test.hello?batch=1&input={"0":{"json": {"text": "World"}}} with no payload body.
All ROUTERNAMEs are specified under src/server/api/routers and all ROUTERMETHODNAMEs can be found under the respective router file (e.g. the hello, method in the previous example can be found in src/server/api/routers/test.tsx).
To learn more, see the tRPC docs.
This project is licensed under the terms of the MIT License.
If you have any inquiries about the development of this project, you can reach the Hack4Impact McGill chapter at:
- Email: hack4impact@ssmu.ca