All solutions

What are you most proud of, and what would you do differently next time?

🌐 Devlinks App

I have developed a fullstack application named Devlinks using Next.js, Firebase, and TailwindCSS. The application is fully functional and has passed all tests successfully.

✨ Features

• Fully Responsive Design 📱: Ensures optimal viewing experience across all devices.
• User Authentication & Profile Management 🔐: Supports user login, registration, and profile information storage.
• Realtime Database Integration ⚡: Enables instant communication and securely stores all changes in the database.
• Optimized SSR and CSR 🚀: Implements Server-Side Rendering (SSR) and Client-Side Rendering (CSR) for the best performance.
• Enhanced User Interaction 🎨: Incorporates design initiatives to improve user engagement where necessary.

📄 Project Description

Users can create their profiles, add and remove links, and rearrange them using a drag-and-drop feature. They can also personalize their profile by adding their name, surname, profile picture, and email address.

Once all changes are made, users can click the "Preview" button at the top right corner to see their modifications live via a unique URL. On the preview page, users can click the "Share Link" button at the top right to share their personalized link with the world permanently.

My devlinks: https://devlinksapp.vercel.app/R7AYQ9

Welcome to the Sunnyside Agency landing page project! This project is a fun and colorful landing page created using React, Vite, Tailwind CSS and Framer Motion. It follows the mobile-first approach and is designed to be responsive on various devices including mobile phones, tablets, and desktops.

Technologies Used

• React
• Vite
• Tailwind CSS
• Framer Motion

Features

• Fun and colorful design
• Responsive layout for mobile, tablet, and desktop
• Interactive animations powered by Framer Motion

Important note: The reason for the application not rendering correctly in Frontend Mentor's checker is due to the Framer Motion's whileInView feature. Please don't be prejudiced and take a look at the live preview of the application.

Hello everyone ! I got a question for you. I didn't use any library for the drag and drop event; I implemented it myself. While it works stably on the desktop version, I couldn't design an optimized logic for the mobile version. If you have any suggestions for improvement after reading the code documentation, please don't hesitate to provide feedback. (Dnd logic is in /src/components/Main/TodoList.jsx)

Features

• Themes: The project offers users two theme options, light and dark. It is responsive to browser themes, automatically selecting the light or dark theme based on your browser's default theme.

• Drag and Drop Sorting: A custom sorting logic has been developed to enable users to reorder Todo tasks using the drag-and-drop method. No external libraries have been used for this purpose.

• Text Display: In case of text overflow for Todo tasks, it is possible to view the full text by clicking on the text. This feature prevents layout distortion and provides a more readable list.

• Responsive Design: The project is designed to be compatible with mobile, tablet, and desktop devices, offering a user-friendly experience on each platform.

Please share your suggestions and feedbacks!

Hey everyone ! If you have any different solution ideas, feel free to leave a comment!

Greetings everyone! Please share your feedback and suggestions for more optimized solutions. Thank you!