• 

  Home page

• 

  Select chemical formula and

• 

  12-Dichloroethane Twist

• 

• 

  AR in action

• 

  Click on different parts to know more

• 

  Click on different parts to know more

ChemAR

💡 Inspiration

During high school or college we came across a situation were chemistry seems to be a dry subject, because the chemical molecules are just printed on the book in the form of an equation which is quite difficult to visualize and ultimately results in mugging up the molecules without knpwing its true shape. To make this subject more interactive and fun we introduce ChemAR, an webapp were students can visualize the chemical molecules and polymers in 3D intreactively through AR.

💻 What it does

User simply needs to explore and click on the molecule that user wants to visualize in AR and can also interact with it. by clicking on particular atom in the 3D model it also displays what the atom is and its properties.

⚙️ How we built it

• Next Js: For frontend and backend
• GraphQL: For the API
• AssebmlyAI: For speech to text
• Three.js: For the 3D model rendering
• Tailwind: For the styling

📅 Best Use of React + GraphQL (Sponsored by Invoca)

We are using GraphQL to simplify the API calls and to make it easier to use the data. It was the first time we were using the GraphQL and we love it. It is a declarative language that allows you to describe a query in a concise and readable way.

🌐 Best Domain Name from Domain.com (Sponsored by MLH)

• Any domain name with .tech, eg longitude. tech. We will choose the best domain name among all.

🤖 Best Use of AssemblyAI API (Sponsored by AssemblyAI)

• We are using AssemblyAI API to convert speech to text for search page. User can search about anything by just speaking the word and we will show the result.

🧠 Challenges we ran into

• For the first time we were using AssemblyAI API to convert speech to text so were having some trouble with using that.
• We were using GraphQL for the first time, so we had triuble using it, but soon we were able to use it easily.
• Rendering the 3D model was a bit challenging, but we were able to get it done.
• Deploying the app was a bit challenging, but we were able to get it done.

🏅 Accomplishments that we're proud of

• Completing the project with a team of 2 people in the given time.
• Implementing all the features of the project.
• Using GraphQL and AssemblyAI API to convert speech to text.

📖 What we learned

• We learned how to use the AssemblyAI API and how to use the GraphQL.
• We learned how to use Three.js.
• We learned valuable collaboration skills.

🚀 What's next for ChemAR

• Adding more features to the app.
• Adding more 3D models.
• Adding Virtual Reality support.

Business Model

Built With

• graphql
• nextjs