Vien Dinh
Next.js Developer with TypeScript, GraphQL, ... Experience
Services
I help agencies and freelancers to develop Next.js headless cms/commerce websites. Do you have a Web Design? Do you have a Headless API? I am here at your service to help you grow your business and earn profits.
✅ Designs: Figma, Adobe XD, Sketch✅ Styles: Tailwind, Sass, CSS Modules
✅ Scripts: JavaScript, TypeScript, React
✅ SEO: Next SSR, SSG, ISG, and Next SEO
✅ Sources: GraphQL, RESTful, Markdown
✅ Deployment: Vercel, Netlify, Heroku
✅ Devtools: Git, Docker, VSCode with Vim
If my expertise suits you, let's talk about your projects! Together we will create awesome websites to satisfy your clients. 🤙
Experience
Full Stack Developer • Specializing in Next.js
Starting my endeavor with React.js & Next.js at the beginning of 2019, working on various projects, I have updated my skills with TypeScript, Unit Testing, GraphQL, Redux, React Query, Material UI, CSS Module, Tailwind CSS, PostgreSQL, Hasura GraphQL Engine, etc.
One of my featured projects is Next Shopify Storefront (MVP), which you can refer to develop and scale your real-world websites, especially with Shopify Storefront GraphQL API. The GitHub repository has gained over 500 stars and over 100 forks.
Front End Developer • Morph Ventures
I worked for Morph Ventures to develop the ExpertDB project, a marketplace that helps businesses connect with experts to get insights or tackle projects.
As a front-end developer, my responsibility was to convert designs to pixel-perfect, responsive web templates with HTML, CSS, jQuery, and Semantic UI. Through the development cycle, I integrated and improved the web templates directly in the Views (MVC) of the Yii framework.
My effort with the team helped the project raise $500k and launch in 150 countries in May 2016.
Front End Developer • Various Agencies
Starting my career as a front-end developer, I worked for various agencies to help them convert over 50 designs to high-quality, responsive web templates with HTML, CSS, and jQuery.
To boost my productivity, I leveraged open-source tools such as Bootstrap, Gulp, Grunt, LiveReload, Less, Sass, Twig, and Handlebars to automate & enhance the workflow, which saved development time significantly.
One of the agencies I worked for is Creative Haus which you can see in the Work History section on my Upwork profile.
Projects
Next Shopify Storefront
The React ecosystem is changing rapidly, with new libraries popping up now and then. As a React Developer, I must catch up effectively with the evolution.
My favorite way to learn new libraries is by building projects with them. So I can see how they work in the real world instead of skimming their documentation.
While building this project, I used TypeScript, Next.js, Redux Toolkit, React Query, Shopify Storefront GraphQL API, GraphQL Code Generators, Material UI, and Tailwind CSS to practice my skills.
Super Memo Implementation
Working remotely internationally, I must constantly improve my English skills. I need an optimal way to expand and keep vocabulary in my long-term memory.
The algorithm Super Memo captured my attention. So I implemented a JavaScript/TypeScript library from the original Delphi code. The GitHub repository now has over 200 stars.
Based on the library, I created a side project with Next.js and Hasura GraphQL Engine to practice the most common vocabulary from a dictionary. I had stored over 6500 words in my long-term memory (April 20, 2023).
Bootstrap Shopify Theme
Caring about the e-commerce industry, I started to study the Shopify platform and built a theme from scratch.
Instead of legacy technologies, I used Webpack to build the theme with BEM, Liquid, Sass, and ESNext fashionably. I also used Shopify Theme Check, ESLint, StyleLint, and Prettier to make the project follow the best practices.
Working on this project helped me to learn a lot about software development in e-commerce. The GitHub repository now has over 50 stars and over 50 forks.
Front-end Boilerplates
Converting Designs to HTML, CSS, and jQuery web templates could be tedious if you do not know how to handle repetitive tasks properly.
So, I created front-end boilerplates to modularize the templates into reusable components, following the BEM methodology or Bootstrap naming convention, etc.
Doing this makes my front-end projects scalable and maintainable. It also helps developers collaborate on one project effectively.
