FOSSLingo web client

---

What is FOSSLingo?

FOSSLingo is an alternative to traditional language learning apps, designed to be free and open-source. I (iddu01) believe that education should be free for all, espically language learning. I originally made this as a project for Hackclub's Horizons.

Screenshots;

See @SCREENSHOTS.md

How to use;

Currently, you can visit this link (learn.iddu01.me) to demo FOSSLingo.

I haven't gotten around to actually adding any language courses, because I have not had any time to find a person willing to volunteer their time to help add a course. Also I want to polish the UI and stuff before courses are added. So this is currently a tech demo.

Development;

This guide assumes you have npm (or alternative), and git installed on a Linux system.

First, get the code:

git clone https://github.com/FOSSLingo/web

Next, (enter the code directory, and) install stuff:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

# you can substitute "install" for "i" if you want to i guess

Create a .env file from the example .env file

cp .env.example .env

Change NEXT_PUBLIC_BACKEND_URL to your backend url:

Note

If you don't have a backend server running, feel
free to set the backend URL to this one
provided by iddu01!
backend.learn.iddu01.me

nano .env

# Change this variable!!
NEXT_PUBLIC_BACKEND_URL=https://example.com:PORT 

Then, start the dev server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your web browser to see the result.

AI usage;

Some AI was used to connect to the backend, while some of the "connecting to backend logic" was from sites like StackOverflow or Reddit questions lol. All the frontend was done by me though.

Hosting on Vercel;

Important

If you haven't deployed the backend,
it is a good time to do that now.
Follow the instructions here
The frontend will not load if there is no backend to connect to.

Since this is a Next app, the best way to host would probably be on Vercel. Click this button to deploy instantly!

Or, follow these instructions manually.

1. Create a Vercel account at vercel.com, and link your GitHub account
2. On Github, create a fork of FOSSLingo/web
3. Back on Vercel, Click on "Import Project"
4. Select Import next to "web"
5. Under Application Preset, select Next.js
6. Click "Environment Variables", and add one named NEXT_PUBLIC_BACKEND_URL with the value of your backend URL. Add another Environment variable named NEXT_PUBLIC_AI_FEATURES_ENABLED, and set it to true or false. If it is set to true, add another Environment Variable named GEMINI_API_KEY and set it to a valid Gemini API key.
7. Click Deploy, and Deployment should start with the latest Git Commit

Self hosting deploy

If you would like to self host the frontend on your own machine, follow these instructions.

Tip

We don't cover port forwarding / exposing to the web,
but for that, we recommend cloudflared!

This guide assumes you have npm and git installed on a Linux system. (because Linux is superior)

1. Clone this repo somewhere easy to access:

git clone https://github.com/FOSSLingo/web

2. cd into the cloned directory:

cd web

3. Start the production server:

npm run build && npm start

---

This is a NextJS app made with create-next-app. It is made as the main client for FOSSLingo.