Get in touch

Full Stack Developer

|

About

Here's a little background

I began my career in 2018 as a Freelance developer, specializing in JavaScript technologies. This opportunity allowed me to gain valuable experience working on various projects, honing my skills in Node.js, and React.

In August 2019, I joined So City as a Fullstack MERN developer, where I made significant contributions to the Node.js backend, developing APIs, and building user-facing front-end websites using React. I was also responsible for ensuring optimal page performance to support our recommendation platform's SEO requirements, utilizing MongoDB as our cloud database. During my time at So City, I was promoted to Tech Lead, leading a team of four developers.

In December 2020, I joined Editorialist as a UI Engineer, taking charge of migrating their CMS from a Ruby on Rails app to a React-based web application. As a result of my contributions, I was promoted to Senior UI Engineer. Additionally, I have started migrating the user-facing frontend application from WordPress to Next.js, resulting in improved SEO and core web vitals.

Experience

Fullstack Developer

So City

1 year & 4 months

Started 2019-08-01 - Ended 2020-12-01

Node.jsReactFirebaseMongoDBSCSS

Develop and implement web applications using both frontend and backend technologies.
Write clean, efficient, and maintainable code for both client-side and server-side applications.
Build responsive and mobile-friendly web applications that work seamlessly across different devices.
Implement and integrate APIs to connect frontend and backend systems.
Work with databases to design schemas, query data, and optimize performance.
Implement security measures to protect web applications against potential threats.
Collaborate with designers, product managers, and other developers to deliver high-quality products.
Optimize web applications for search engine optimization (SEO) and accessibility.

Senior UI Engineer

Editorialist

Started 2020-12-01 - till date

ReactNode.jsNextjsGraphqlFirebaseCypress

Lead UI Development: Take ownership of the UI development process, providing technical leadership and guidance to the team.
Architect and Design: Collaborate with cross-functional teams to define UI architecture, design patterns, and best practices.
Frontend Development: Develop and maintain complex user interfaces using modern web technologies such as HTML, CSS, and JavaScript frameworks like React and Nextjs
Performance Optimization: Optimize UI performance to deliver fast and smooth user experiences, considering factors like loading times, rendering efficiency, and resource management.
Code Quality and Standards: Set coding standards and enforce best practices for UI development, conduct code reviews, and provide feedback to improve code quality.
UI Testing: Collaborate with QA teams to develop and execute UI testing strategies, including unit testing, integration testing, and end-to-end testing.
Cross-browser Compatibility: Ensure that UI components work consistently across different browsers and platforms, addressing any compatibility issues.
Technical Leadership: Provide mentorship and guidance to junior UI developers, assisting them in their professional growth and promoting a culture of continuous learning.

Skills

Node.js

Cypress

Firebase

MongoDB

React

Google Tag Manager

OpenAI

Graphql

Nextjs

SCSS

Google Analytics

PostgreSQL

Projects

Case Study 1 of 2: Brainer-AI (SaaS By Jagraj)

Brainer.ai is a cutting-edge SaaS platform that leverages OpenAI and Replicate APIs, offering AI-generated code, images, audio, and video through a subscription service. Built with Next.js, Tailwind CSS, TypeScript, and featuring Stripe for secure payments, it streamlines content creation for innovators and creators.

Brainer.ai is a cutting-edge SaaS platform designed to harness the capabilities of AI for diverse user applications, integrating OpenAI and Replicate APIs. This project expertly combines modern web technologies to provide a subscription-based service that enables users to generate AI-driven content, including code, images, audio, and video.

Technological Foundation

Frontend: The user interface is built with Next.js and styled using Tailwind CSS, ensuring a responsive and aesthetically pleasing experience. The choice of these technologies underlines the project's commitment to cutting-edge web development practices.
Programming Language: TypeScript is used across the platform for its robust typing system, enhancing code quality and maintainability.
Subscription Management: Stripe is integrated for subscription services, offering a flexible and secure payment system for users. This implementation supports various subscription models, catering to a wide range of user needs.
Authentication: The platform incorporates advanced authentication mechanisms to ensure secure user access and data protection, emphasizing the importance of privacy and security.
Database: Postgres serves as the primary database, with Prisma as the data access layer. This combination allows for efficient data management and operations, supporting the platform's scalability and performance needs.

Core Offerings and Advantages

AI-Powered Content Creation: At its core, Brainer.ai provides users with tools to create AI-generated code, images, audio, and video, opening up new possibilities for content creation across various domains.
User-Centric Design: The choice of Next.js and Tailwind CSS ensures that despite its advanced capabilities, the platform remains accessible and easy to navigate for users of all skill levels.
Flexible and Secure Subscriptions: Through Stripe, Brainer.ai offers a range of subscription options, tailored to meet the diverse needs of its user base while ensuring transactional security.
Robust Data Security: The platform's strong authentication processes and secure handling of user data reflect its foundational commitment to user privacy.
High-Performance Data Handling: The combination of Postgres and Prisma underpins the platform's ability to manage large data volumes efficiently, ensuring a seamless user experience.

Conclusion

Brainer.ai exemplifies the fusion of AI technology with cutting-edge web development to create a versatile and powerful tool for content generation. By offering subscription-based access to AI-generated code, images, audio, and video, it sets a new standard for creative and technical endeavors online. This platform not only showcases technical excellence and innovative use of AI but also represents a pivotal step towards making complex AI functionalities available to a broader audience, empowering users to explore new creative horizons.

Github Link Web Link

Case Study 2 of 2: Photo Gen By Jagraj

"Photo Gen" leverages OpenAI's Dall-E for text-prompted image generation, offering a streamlined platform with Next.js and MongoDB. Users can create, share on a feed, and download AI-crafted images, fostering a space for exploring AI art without the option for comments.

"Photo Gen" is a pioneering web application that blends the power of OpenAI's Dall-E with the latest web development technologies to offer a unique creative platform. It empowers users to generate images from textual prompts, leveraging the sophisticated AI of Dall-E to convert imaginative ideas into visual art. Here's a deeper look into what makes Photo Gen a standout project:

Technology Stack

Frontend: Developed using Next.js, Photo Gen delivers a smooth and responsive user interface, ensuring a seamless experience across various devices.
Database: Utilizing MongoDB, the application offers robust data management, efficiently storing user-generated content and feed data.

Core Features

Image Generation: Users can input text prompts, which Photo Gen transforms into stunning images through Dall-E's AI, showcasing the remarkable capabilities of machine learning in creative processes.
Feed Posting: After generating images, users have the option to share their creations on a public feed. This feature turns Photo Gen into a communal space where creativity is celebrated and shared among users.
Download Functionality: Recognizing the personal value and potential use of these AI-generated images, Photo Gen includes a download feature, allowing users to save their creations for personal or professional use.

User Experience

Photo Gen's user interface is designed for simplicity and ease of use. Without the complexity of account setups or navigational hurdles, users can directly engage with the core functionality of generating and sharing images. The absence of a commenting feature focuses the user experience on creation and exploration, rather than social interaction, which can often detract from the essence of creative platforms.

Conclusion

Photo Gen represents a significant achievement in the intersection of AI and web development, providing a canvas for users to explore the limits of their creativity. It not only demonstrates the technical prowess involved in integrating complex AI models with user-friendly web applications but also highlights the potential for AI to augment human creativity. As a showcase of innovation, Photo Gen invites users into the future of art and expression, facilitated by the boundless possibilities of artificial intelligence.

Github Link Web Link

Contact

I have got just what you need. Let's Talk

+918178636470

Gurgaon, India

jagrajbains.94@gmail.com