An Animated Discovery of Neuroscience is a web application with the aim to provide computer science and math students with the interactive educational animations pertaining to biological sciences. Given the deprecation of Adobe Flash Player, and by extension, Adobe ActionScript, as of January 2021, the entire website was essentially unusable. The aims of this project were to create and recreate the educational content in HTML5 Canvas and JavaScript, along with creating a better UI/UX, and adding a backend. The web application utilizes the MERN stack, along with APIs and libraries, such as JQuery, Pug, and TypeScript, creating a pleasant user interface optimized for desktop and mobile devices. The web application’s backend utilizes MongoDB, and students can register for an account and monitor their progress for each animation in a visual format.
- Lines of Code - 207,400 lines (approx.)
- Languages used - React JS, TypeScript, jQuery, JavaScript, Pug, CSS, and HTML.
https://animated-neuroscience.herokuapp.com/introduction
This project was bootstrapped with Create React App.
Prior to my intervention, website used CSS, JavaScript, HTML, Adobe ActionScript animations that were essentially broken, and the site had no backend. Now the web application uses the MERN stack, along with TypeScript, jQuery, JavaScript, and Pug, and the web application has a backend.
| Before | After |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
Within fullscreen on mobile, you scroll down to monitor your progress.
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
Clone the repository
git clone https://github.com/blaisebowman/AnimatedNeuroscience.git
Open a terminal, in the main directory run:
npm install
Open a second terminal, run:
cd frontend && npm install && yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.\
Open a third terminal, run:
cd server && npm install && node server.js
Note: the database configuration files are sensitive and not included in this repo, so you will not be able to test backend functionality on your machine.