Built with the latest Next.js, ProteinBind is an advanced platform that empowers researchers and developers to visualize molecular structures, generate custom molecules using SMILES notation, and collaborate in real-time using group messaging features. Leveraging AI and modern web technologies, ProteinBind aims to streamline the molecular research process, facilitating faster insights and improved decision-making.
🎓 What You’ll Learn:
- React.js fundamentals and best practices
- Full-stack development with Next.js
- Integrating RDKit for molecule visualization and manipulation
- TypeScript implementation in a React project
- State management with Context API
- Responsive design with Tailwind CSS
- Authentication using NextAuth
- Database integration with MongoDB and Mongoose
- Implementation of verify user by email, reset password etc
- Using Resend for sending emails
📚 Project Highlights:
- AI-powered molecule generation based on SMILES notation
- Real-time collaboration through group messaging
- Molecule visualization and data analysis with RDKit
- A modern user interface supporting light and dark modes for improved usability
- Group creation and message management for research collaboration
👨‍💻 Step-by-Step Guide:
- Setting up a Next.js project with React.js
- Creating responsive layouts with Tailwind CSS
- Implementing authentication and user management
- Designing and integrating MongoDB with Mongoose
- RDKit integration for molecule visualization
- Building interactive components for molecular manipulation
- Deploying your application to a scalable platform
⭐ Useful Resources:
- RDKit: react.rdkitjs.com/#component-example-moleculestructure
- TailwindCSS: tailwindcss.com/
- NextAuth.js: next-auth.js.org/
- Mongoose: mongoosejs.com/docs/
- MongoDB: www.mongodb.com/
- React ApexCharts: apexcharts.com/docs/react-charts/
- Next.js: nextjs.org/
- Ably: ably.com/docs/products/channels
- Resend: resend.com/docs/send-with-nextjs
- NVIDIA AI platfrom : build.nvidia.com/
- Pubchem API: pubchem.ncbi.nlm.nih.gov/docs/pug-rest#section=Pathway-Summary
📚 Materials/References:
- GitHub Repo (give it a star ⭐): github.com/mendsalbert/ProteinBind
- Starter File: github.com/mendsalbert/protein-bind-starter-file
- README (assets & code): github.com/mendsalbert/ProteinBind
- SMILES String White paper - www.epa.gov/sites/default/files/2015-05/documents/appendf.pdf
- Project Requirement , User flow and database schema diagram: github.com/mendsalbert/ProteinBind/blob/main/protein%20bind.drawio.zip
👋 Social Media:
Twitter: mendsalbert
Instagram: mendsalbert_
LinkedIn: linkedin.com/in/mends-albert
Telegram: t.me/albertmends
Subscribe or I turn your VS Code into light mode!
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝
Timestamps
00:00:00 - intro
00:00:57 - demo
00:05:06 - SMILE Strings crush intro
00:08:44 - functional requirement
00:11:19 - user flow diagram
00:12:32 - system architecture
00:14:17 - database schema
00:15:33 - starter file setup
00:19:58 - default layout page + sidebar
01:00:17 - header component
01:18:00 - Dashboard page
01:30:24 - setting mongo db account
01:35:31 - database models
01:50:21 - resend intro (part 1)
01:53:20 - database actions
02:15:21 - resend ( email templates and APIs )
02:26:10 - user context and authentication API
02:34:31 - sign-in , signup , verify email and forget password pages
03:03:57 - protected routes + profile page + settings page + logout functionality
03:20:48 - Molecule bank page + RDKit package ( converting SMILES to SVG)
03:29:22 - Model page + NVIDIA AI platform + research page
03:41:26 - Implementing realtime chat using ably
💼 Business Inquiries: mendsalbert@gmail.com
Tools and Tech Stack:
React.js, Next.js, TailwindCSS, TypeScript, MongoDB, Mongoose, RDKit, ApexCharts, NextAuth.js
Whether you’re new to React.js or want to dive deeper into full-stack development, this tutorial covers everything from basic setups to advanced features. Learn how to leverage the power of AI and modern web technologies for building scalable applications in molecular research.
Subscribe for more tutorials and development tips.
#ReactJS #NextJS #AIinMolecularResearch #FullStackDevelopment #TypeScript #TailwindCSS #CodingTutorial