We were tasked with designing and creating a development skeleton for future Bio::Neos interns to experiment with and build on. Given several options for the framework, we chose Nuxt.js and Vue due to their aesthetic appeal, strong documentation, and supportive community. Our primary goal was to develop an application with some loose ends to give future developers footholds to make it their own and gain valuable learning experiences. Additional goals included experimenting with new technologies, gaining a better understanding of the web development process, and creating a project that could serve as a showcase of our work.
- Primary Goal: Provide a base for future development interns to use as a jumping-off point.
- Secondary Goals:
- Experiment with unfamiliar technologies.
- Enhance understanding of the web development process.
- Create a demonstrative project for career development.
- Branch and customize for personal projects/career development
- Use as guide for future interns
- Nuxt 3.12
- Vue.js (either 2.7 or 3)
- MySQL
- Docker
- Bcrypt
- Prisma 5.15.0
- Docker
-
Clone the repository:
git clone https://github.com/bioneos/training-project.git
-
Set up the environment variables:
- Create a
.envfile. - Copy the contents of
dotenv.exampleto your.envand update them with your desired values.
-
Start the docker containers
bash start-app.sh
or if you are running docker in a windows wsl2 distro, go to docker/Dockerfile and comment out the lines labeled "Not Windows". Also, update the UNAME and UGROUP values to what you want.
docker compose up --build -
Access the application:
-
Open your browser and navigate to:
http://localhost:[APP_PORT]
APP_PORT is the port value you set up in your
.envfile. -
The correct link will also come up in your container log when starting up the Docker container :
- Accessing your development environment
-
We want to write our code while inside of the app container created by docker (training-project-app-1). This can be done differently based on the IDE being used. We will show you how to do it in VSCode.
- VSCode
-
If not installed already, make sure you have the Remote Explorer extension installed.
-
Navigate to the Remote Explorer tab.
-
Navigate to the training-project-app-1 container and click on the "Attach in current window option".
-
Now you can edit the files from within the container! To view the docker logs while in the container, navigate to the remote explorer tab and right-click the container. Select the "Show Container Log" option. The container will then be displayed in the terminal tab!
-
To access the database container, repeat step c for the training-project-db-1 container. You will need to go into this container so you can access the contents of the database being used for the app. You can use this following command in the terminal of the container to access the database (use the values created in your .env) :
mysql -u[MYSQL_USER] -p[MYSQL_PASSWORD] [MYSQL_DATABASE]
-
- VSCode
This is the page that appears when the application is first initialized.
- Accessible via the ‘Register’ button in the navigation bar.
- Requires a valid email address for registration.
- Users are prompted to log in after successful registration.
- Accessible via the ‘Login’ button in the navigation bar.
- Only registered accounts can log in.
- Toggle button available on all pages in navigation bar.
- Switches between dark mode (moon icon) and light mode (sun icon).
-
Displays a welcome message with the user’s name.
-
Navigation options: Home, Settings, Repo (opens new tab), Logout.
- Change their display name.
- Change their account email.
- Change their account password.
- Delete their account.
Changes are handled via API requests, handlers located in server folder
- Nuxt UI official documentation
- Best README Template
- Nuxt installation guide
- Nuxt sandbox (StackBlitz)
- Getting Started With Nuxt UI by John Komarnicki
- Tailwind CSS styling help
- Consola Logging
Distributed under the BSD 2-Clause License. See LICENSE.md for more information.
For further information, contact: