Molecule Viewer

Full Stack Web Application

View and interact with 3D molecules.




Molecule Viewer is a simple web application that allows a user to view molecules in 3D. A user can upload molecule files and then view those molecules once they are stored in the database. Additionally, a user can modify the element properties of a molecule.


This was originally semester long project I worked on during my undergrad and was my first full stack web application. Before this project I had only worked on small projects that run from the commandline. The goal of this project was to get familiar how different technologies interact to create a web application. I used a combination of HTML, CSS, JavaScript for the front end and Python, C, and SQLite for the backend. The project was a near complete success, initially I had some trouble understanding how API calls work, so there were some errors displaying on the actual website, However, the application is fully functional.

After the course was over I wanted to rework the project to use a more modern stack, make some improvements and actually deploy it instead of running it through localhost. The updated front-end was rewritten using Next.js and Tailwind CSS with the Flowbite UI library. I setup an Amazon web services account and use a simple three step CI/CD pipeline through CodeCommit, CodeBuild, and CodeDeploy. CloudFormation is used to model and provision AWS resources and API Gateway is used to create, publish and monitor the RESTful API.

I was able to reuse most of the existing Python and C code after some minor refactoring to work with AWS Lambda serverless functions. The database was migrated to Amazon DynamoDB, I moved away from a relational database to a NoSQL database to take advantage of the flexibility and scalability of DynamoDB. I chose NoSQL since the data is not complex and can be easily represented in a key-value format. I monitor the application using Amazon CloudWatch to monitor the health of the application and to set up alarms for any issues.