DEV Community: swapnil ahmed shishir

My Frist portfolio

swapnil ahmed shishir — Thu, 20 Feb 2025 17:00:38 +0000

I kicked off this year by creating my portfolio, which showcases my coding journey so far. It highlights my skills and projects in HTML, CSS, JavaScript, React.js, and more. As I start searching for my first developer job, I’d love to hear from fellow developers who have been in this position before.

Live site: https://swapnilahmedshishirwebdev.netlify.app/

GitHub repository: https://github.com/swapnilahmedshishir/swapnilahmedshishirwebdev

Questions for you reading this post:
Is there anything important missing from my portfolio?

Is it easy to navigate?

What are your overall thoughts on the site?

Using both Bootstrap and Tailwind CSS in a single React project

swapnil ahmed shishir — Sun, 01 Sep 2024 10:54:38 +0000

Using both Bootstrap and Tailwind CSS in a single React project can lead to several potential issues and challenges. Here's a breakdown:

1. CSS Conflicts

Class Name Conflicts: Bootstrap and Tailwind CSS both use utility class names that could overlap. For example, both frameworks might have a class like container or btn. If both frameworks are loaded, the styles applied might conflict or override each other unpredictably.
Specificity Issues: Even if class names don’t directly conflict, CSS specificity could cause issues where one framework's styles unintentionally override the other’s. This could result in unexpected styling issues that are difficult to debug.

2. Increased Bundle Size

Larger CSS Files: Including both frameworks significantly increases the size of your CSS bundle. This can lead to slower load times and potentially worse performance, especially on mobile or slower connections.
Unnecessary Styles: You'll end up loading a lot of unused styles, which is inefficient. Tailwind is typically used with tools like PurgeCSS to remove unused styles, but with both frameworks, this becomes harder to manage.

3. Development Complexity

Inconsistent Styling Approach: Bootstrap and Tailwind CSS have very different approaches to styling. Bootstrap is a component-based framework with pre-built components, while Tailwind is a utility-first CSS framework. Mixing these can lead to inconsistent styling and increased complexity in your codebase.
Learning Curve: Developers on the project will need to understand and work with both frameworks, which might increase the learning curve and development time.

4. Maintenance Challenges

Long-term Maintenance: Managing two CSS frameworks in the long term can become cumbersome. It may lead to difficulties in maintaining and updating the styles, especially if you need to upgrade the versions of either framework.

When It Might Be Justifiable:

Legacy Code: If you’re gradually migrating from one framework to another, you might need to temporarily use both. In this case, try to minimize overlap and gradually phase out one framework.
Component Libraries: If you’re using a third-party component library that depends on Bootstrap, you might need to use Bootstrap alongside Tailwind. In this case, try to isolate the Bootstrap styles as much as possible.

Recommendations:

Choose One Framework: If possible, stick to one framework to avoid the above issues. Tailwind CSS is great for utility-first, highly customizable designs, while Bootstrap is good for quickly building standardized components.
Scoped Styles: If you must use both, try to scope the styles of one framework to a specific section of your app to minimize conflicts. For example, you could load Bootstrap only for certain components or use CSS modules to isolate styles.

By carefully considering these factors, you can avoid most of the pitfalls associated with using both Bootstrap and Tailwind CSS in the same project.

Node Server Setup

swapnil ahmed shishir — Tue, 20 Feb 2024 17:41:29 +0000

1 . give new folder name ServerSide or backendServer

write this text $ npm init -y
create file Server.js
install this npm service $ npm install express mysql cors cookie-parser bcrypt jsonwebtoken multer path nodemon 5.create 5 impotent folder in MVC Public/images , Routers , Models , controllers , Utils ,
package.json add some text "main": "Server.js", "type": "module", "scripts": { "start": "nodemon Server.js" }
Utils/ db.js file create and connect mysqul or other database

import mysql from 'mysql'

const db = mysql.createConnection({
host: 'your_mysql_host',
user: 'your_mysql_user',
password: 'your_mysql_password',
database: 'your_mysql_database'
})

db.connect(function(err) {
iif (err) {
console.error('Error connecting to MySQL: ' + err.stack);
return;
}
console.log('Connected to MySQL as id ' + db.threadId);
})

export default db;

8.server.js work
import express from "express";
import cors from 'cors'

const app = express()
const port = 5175 ;
const localhostPort = 7175 ;
app.use(cors({
origin: [http://localhost:${localhostPort }],
methods: ['GET', 'POST', 'PUT', "DELETE"],
credentials: true
}))
app.use(express.json())

app.listen(port , () => {
console.log("Server is running")
})
app.use(cors(db));

Routers file all Route here contoll.
controllers fill ey all logic controll here .