Progress Made

Designing the app

To begin with, I spent some time researching existing social card apps to get a sense of what features are currently available in the market. Based on my research, I identified a few key features that would be essential for our app, such as the ability to create and customize social cards, share them on different platforms, and invite friends to connect and share their own cards.

Next, I started working on the initial design phase of the app. I created wireframes and mockups in Figma to visualize the user interface and user experience of the app.

As part of the planning phase, I also worked on creating a project roadmap and a list of tasks to be completed in the coming weeks. This included defining the app's technical architecture and infrastructure, selecting the development tools and technologies, and setting up the development environment.

Project Layout

I opted to use an MVC architecture, which allows us to break down the app into smaller, independent services that can be developed, deployed, and maintained separately. This architecture provides several benefits, including scalability, fault tolerance, and flexibility.

The app's backend is built using MongoDB We also use API Gateway and Lambda functions to handle the app's API calls and server-side logic.

For the front end of the app, I decided to use an EJS for templating, and SASS/SCSS for styling, I also plan to use responsive design techniques to ensure that the app is optimized for different screen sizes and devices.

For Routing I decided to go with the express library

In terms of the development tools and technologies, we plan to use Git for version control

Coding

Unique eCard for every user

I decided to go with the MongoDB database to store all the user data, the user data will include the username, hash, name social and so much more. getting the eCard of the user will happen here. I have Data on the user which the user has filled out. I will use the username the user chose to create a personal eCard page

app.get('/profile/:username',(req, res) => {
    const username = req.params.username
    db.collection(USERS).findOne({
        username: username
    })
    .then(data => {
        res.render('pages/ecard.ejs', {user:data})
    })
    .catch(err => console.error(err))   
})

Getting the title container looking good

I had some problems styling the title container. I wanted the big bold Name underneath the profile pic and under the name a small sub-title container that has the job title and company. and a dotted line on the left side. but I couldn't get it to listen to me.

I tried aligning the center and to use fixed margins and padding, even tried to auto margins, flexbox, and nothing seemed to work. until I found the solution

<header>
    <div class='title-container'>
        <h1>Daniel Vidar Holm</h1>
        <div class="subtitle-container">
            <p>Occupation</p>
            <p>Company</p>
        </div>
    </div>
    <div class='bio-container'>
        <p>
            Lorem sit amet consectetur sit amet consectetur adipisicing elit 
        </p>
    </div>
</header>

.title-container > .subtitle-container{
    display: flex;
    flex-direction: column;
    color:rgb(41, 41, 41);
    gap:0.2rem;
    padding-left: 1rem;
    padding-bottom:0.5rem;
    padding-top:0.5rem;
    border-left: 2px dotted black;
    margin-left: 5px;
    margin-right: auto;
}

The problem was I needed to set the margin on the right to auto and the margin on the left to a fixed number. after figuring that out I fixed the problem

What's Next

Next on the schedule is to finish up the front end of the app. Im going to make it look really pretty and pleasing to the eyes. I want to finish the eCard template so I can start pushing data into the database and create customizable profiles. after that is done I will start working on the Login page and Sign up page

Conclusion

in conclusion, building a digital social card app is a complex but rewarding process. It requires careful planning, thoughtful design, and solid technical implementation. I want to follow the best practices and stay agile and responsive to what I think the user needs, I believe that I can create an app that provides real value and helps people connect and share in a more meaningful way.

Closing Words

If you enjoyed reading this article and are interested in learning more about web development and technology, I invite you to check out my blog There, you'll find various articles on topics such as front-end development, back-end development, database management, and more.

In addition to my blog, you can follow me on Twitter at @DanielVidarHolm for the latest updates and insights on technology and innovation. And if you have any questions or feedback, please don't hesitate to reach out to me at danielvidarholm@gmail.com.

Thank you again for reading, and I hope to hear from you soon!