This is the work-in-progress version of the open-source SciTeens platform. This application is built in Next JS (A Server-Side Rendered React JS framework.) If you encounter issues with the website, please fork our site and commit fixes or detail the issues in the issues tab on GitHub. If you just want to explore the code, then enjoy!
If you'd like to learn about web development, you can explore this repository and the tools that we use. We've provided the tools that we use below, as well as some good learning guides for getting started with each of these tools.
- Tailwind CSS
Tailwind CSS is a class-based CSS framework that allows us to style our website. It's pretty straightforward to learn, the documentation is fantastic, and you can try it yourself without downloading anything. - React
React is a framework that allows us to create the functionality for each of our pages. To get started, be sure to check out this website - Next JS
Next JS is built on top of React, and allows users to find our website easier via search engines like Google using a concept called Server Side Rendering or Static Site Generation (SSR or SSG). To learn more about Next JS and the concepts of SSR and SSG, check out the Next JS docs. - Firebase
Firebase is a fantastic tool for easily managing the back-end of an application from the front-end. Firebase takes care of managing users, website analytics, as well as storing data in a NoSQL database. To get started with learning Firebase, we recommend checking out this website or watching this video. Also, be sure to check out the official Firebase YouTube channel https://www.youtube.com/c/firebase - Docker
To host our website, we use a tool called Docker paired with Google Cloud Run. These tools allow us to "bundle" our site (almost like we're packaging our website up into a box) and then putting that "box" on Google Cloud Run for other people to access at https://sciteens.org.
Before you begin, make sure that you have both Git and Node JS installed on your computer. To get started with the code, follow the steps below:
- Clone the repository by typing in
git clone https://github.com/Sci-Teens/sciteens.gitinto your command line. If you don't have access, you can fork the repository instead. - Type in
cd sciteensto the command line and hit enter. - Type in
npm installto the command line and hit enter. This will download all necessary packages - Type in
npm run devand visit localhost:3000 in your browser. This will show the development build! - If you encounter an error at the step above, it's likely because you don't have access to the API keys. If you'd like to join the team to contribute to the website, reach out!