# Welcome! This is a wiki for all information related to TechUp. If you require more information, please email sn-innovation-transformation\@gmail.com. # Self-Directed Learning Roadmap Start here if you want to learn parts of TechUp in your own time, at your own pace. For those of us who may not have the time to undergo the full month-long TechUp, here are some curated, readily-available resources that the TechUp team recommends that you can get started with immediately. The objectives of this learning roadmap are to: {% hint style="success" %} [**Understand how the Internet works**](#week-1-2-hours-how-does-the-internet-work) * **Internet Infrastructure**: Learn about the physical and virtual components that make up the internet, including servers, data centers, and undersea cables. * **IP Addresses and DNS**: Understand how devices are identified on the internet and how domain names are translated into IP addresses through the Domain Name System (DNS). * **Data Transmission**: Study how data is broken into packets, how these packets travel through different routes to reach their destination, and how protocols like TCP/IP ensure reliable communication. * **Web Protocols**: Explore protocols such as HTTP/HTTPS, which enable the transfer of web pages from servers to browsers. * **Network Security**: Learn about encryption, secure sockets layer (SSL), transport layer security (TLS), and other methods used to protect data during transmission. * **Cybersecurity**: Understand common internet threats like malware, phishing, and DDoS attacks, and learn basic strategies to mitigate these risks. {% endhint %} {% hint style="success" %} [**Understand product thinking**](#week-2-product). Key concepts: * **User-Centered Design**: Emphasize the importance of understanding user needs, preferences, and behaviors in product development * **Product Vision and Strategy**: Understand how to create a compelling product vision and align it with business goals and strategies. * **Feature Prioritization**: How to decide which features to develop first. * **Prototyping and Testing**: Understand how to create prototypes and conduct user testing to gather feedback and iterate on product design. * **Metrics and Analytics**: Understand key performance indicators (KPIs) and metrics to measure product success and inform decision-making. * **Agile and Lean Methodologies**: Learn about agile development practices and lean startup principles to create flexible, efficient product development processes. {% endhint %} {% hint style="success" %} [**Understand web development basics**](#weeks-3-6-20-hours-selected-modules-of-the-complete-2024-web-development-bootcamp-on-udemy)**.** Key concepts: * **HTML and CSS**: Learn the fundamental building blocks of web pages, including how to structure content with HTML and style it with CSS. * **JavaScript**: Gain basic proficiency in JavaScript to add interactivity to web pages, manipulate the DOM, and handle events. * **Responsive Design**: Understand how to create web pages that look and function well on a variety of devices and screen sizes. * **Front-End Frameworks**: Get an introduction to popular front-end frameworks like React and Vue.js that facilitate building dynamic user interfaces. * **Back-End Development**: Learn the basics of server-side programming with languages like Node.js, Python, or Ruby, and understand how to create APIs. * **Databases**: Understand how to interact with databases using SQL or NoSQL to store and retrieve data. * **Version Control**: Learn the basics of version control systems like Git to manage code changes and collaborate with other developers. * **Deployment**: Get an introduction to deploying web applications to the cloud using services like AWS, Heroku, or Netlify. {% endhint %} *** ## Week 1 (2 hours): How does the Internet Work? ### a. How Computers Work This playlist is an educational series of short videos that explain the fundamental concepts of computer science in an accessible and engaging way for beginners. Key topics include: * [**What Makes a Computer, a Computer?**](https://www.youtube.com/watch?v=mCq8-xTH7jA\&list=PLzdnOPI1iJNcsRwJhvksEo1tJqjIqWbN-\&index=2): Explains the basic components and functions of a computer. * [**Binary & Data**](https://www.youtube.com/watch?v=USCBCmwMCDA\&list=PLzdnOPI1iJNcsRwJhvksEo1tJqjIqWbN-\&index=3): Introduces binary code and how computers use it to process data. * [**Circuits & Logic**](https://www.youtube.com/watch?v=ZoqMiFKspAA\&list=PLzdnOPI1iJNcsRwJhvksEo1tJqjIqWbN-\&index=4): Discusses how electrical circuits and logic gates form the foundation of computer operations. * [**CPU, Memory, Input & Output**](https://www.youtube.com/watch?v=DKGZlaPlVLY\&list=PLzdnOPI1iJNcsRwJhvksEo1tJqjIqWbN-\&index=5): Describes the role of the central processing unit, memory, and how computers interact with the outside world through input and output devices. * [**Hardware and Software**](https://www.youtube.com/watch?v=xnyFYiK2rSY\&list=PLzdnOPI1iJNcsRwJhvksEo1tJqjIqWbN-\&index=6): Covers how software is used to control hardware and perform tasks. {% embed url="" %} ### b. How the Internet Works This playlist is a series of educational videos that explain the fundamental concepts and mechanics behind the internet. Key topics include: * [**What is the Internet?**](https://www.youtube.com/watch?v=Dxcc6ycZ73M\&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7): An introduction to the internet, its structure, and how it connects millions of devices worldwide. * [**IP Addresses and DNS**](https://www.youtube.com/watch?v=5o8CwafCxnU\&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7\&index=3): Explains how IP addresses and the Domain Name System (DNS) help devices find and communicate with each other. * [**Packets, Routing, and Reliability**](https://www.youtube.com/watch?v=AYdF7b3nMto\&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7\&index=4): Discusses how data is broken into packets, how they are routed across the network, and methods to ensure reliable data transfer. * [**HTTP and HTML**](https://www.youtube.com/watch?v=kBXQZMmiA4s\&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7\&index=5): Covers how the Hypertext Transfer Protocol (HTTP) and Hypertext Markup Language (HTML) are used to deliver and display web pages. * [**Encryption and Public Keys**](https://www.youtube.com/watch?v=ZghMPWGXexs\&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7\&index=6): Introduces encryption methods and public key infrastructure to secure data transmission. * [**Cybersecurity and Crime**](https://www.youtube.com/watch?v=AuYNXgO_f3Y\&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7\&index=7): Examines potential threats on the internet and strategies to protect against them. {% embed url="" %} ### c. What happens when you type a URL in the browser and press 'Enter'? This Medium article (login required) explains the technical processes that occur when you type a URL into a browser and press enter: 1. **DNS Lookup**: The browser checks the URL to find the corresponding IP address using DNS. 2. **TCP Connection**: The browser establishes a TCP connection with the server. 3. **HTTP Request**: The browser sends an HTTP request to the server. 4. **Server Response**: The server processes the request and sends back an HTTP response. 5. **Rendering**: The browser renders the HTML content, along with CSS and JavaScript, to display the web page. {% embed url="" %} ### d. How the Internet Works (a round-up lecture) Justyn Oh, Software Engineer at Open Government Products, shares a crash-course framework on How the Internet Works, and some takeaways for policy-makers. {% embed url="" %} *** ## Week 2 (4 hours): Selected presentations from TechUp 2.0 and reading materials on Product Thinking ### a. ProductUp slides ProductUp is a half-day workshop conducted by Open Government Product's Product Managers on the overall product development process, from problem statements, to identifying target audience, to user journeys, all the way to iterating and funding successful projects. While this workshop is most effective in a hands-on setting, the slides and exercises will give you an overview of the thinking behind the product process. {% embed url="" %} ### b. Product Management in Software Development: How it Works To expand on ProductUp, this video explains what product management means, including product market fit, product vision, strategy, understanding customers, product execution and product KPIs. {% embed url="" %} ### c. Products 101: What is 'good' product? Conducted by Director/Products Directorate Chen Kaiwei, this session explains the outline of how to pitch a successful product, what a good problem statement is, and how to define outcome metrics. {% embed url="" %} ### d. DesignUp The following presentations by Design Manager Mike Chen & Lead UX Researcher Darren Ng cover: * What is good design? * How do you design your prototype? * How do you test your prototype? {% embed url="" %} {% embed url="" %} {% embed url="" %} {% embed url="" %} {% embed url="" %} {% embed url="" %} ### e. Agile product ownership in a nutshell This video provides an overview of the roles and responsibilities of a Product Owner within an Agile development framework. It highlights key concepts such as **prioritizing the product backlog, defining user stories, ensuring clear communication with the development team, and maintaining a focus on delivering value to the customer**. The video emphasizes the importance of collaboration, iterative progress, and adaptability in the product development process. {% embed url="" %} ### f. Product Metrics: How to Measure Product Success This video explains which North Star metrics report on the product’s successes and failures. Key topics covered are: What is success for you, What are metrics (KPIs)?, user acquisition metrics, user engagement metrics, and financial metrics. {% embed url="" %} *** ## Weeks 3-6 (20+ hours): Web Development ### a. Selected modules of the Complete 2024 Web Development Bootcamp on Udemy The Complete 2024 Web Development Bootcamp on Udemy is a comprehensive course designed to teach students everything they need to become professional web developers. It covers **front-end and back-end development**, including **HTML, CSS, JavaScript, Node.js, React, PostgreSQL**, and more, including practical exercises to build real-world applications. The course is suitable for beginners, with step-by-step instructions and explanations. We have selected a few of the more important modules (marked with "❗") that we recommend learners to focus on: {% content-ref url="/pages/LmhXUCbS9FKdyQkK737m" %} [Mandatory Course (Udemy)](/programme-essentials/mandatory-course-udemy) {% endcontent-ref %} ### b. Primers to understand Web Development The TechUp team has also prepared primers to break down key concepts related to **front-end development, Git/GitHub, HTML, CSS, JavaScript, back-end development Databases and APIs.** These are short lectures with some hands-on exercises. {% content-ref url="/pages/xov6CIR8Qlty449ITxdW" %} [Programme Materials](/programme-essentials/programme-materials) {% endcontent-ref %} *** ## Weeks 7-10 and beyond (40+ hours): CS50 for Lawyers (highly recommended as a bonus) CS50 for Lawyers is a highly-rated and well-acclaimed version of Harvard's renowned introductory computer science course tailored specifically for non-technical professionals. It provides a broad overview of computer science and programming, aimed at helping lawyers understand the technology landscape. Key topics include **algorithms, data structures, cryptography, cybersecurity, and the basics of programming languages like Python and SQL**. The course focuses on practical applications in the legal field, enabling lawyers to better navigate tech-related cases, communicate with technical experts, and understand the implications of technology on law. {% embed url="" %} CS50 for Lawyers is designed to be completed in **about 10 weeks**, with an estimated time commitment of **6 to 9 hours per week**. It is particularly beneficial for policy officers who interact with technology but are not directly responsible for tech policy, strategy, or planning.
# Why do TechUp ## SN Group Mission > “Many countries and cities have similar ambitions to become smart nations or smart cities. The concepts and ideas vary. For us, being a smart nation is not about flaunting glitzy technology, but it is about applying technology to solve real world problems that will make a difference to people’s lives, and across the whole of society.” > > *Prime Minister Lee Hsien Loong* Our core mission as SN is to apply technology to solve real world problems. In order to deliver on Smart Nation ambition, we need to take training and skills development very seriously to stay relevant. TechUp aims to equip SN officers with baseline modern technical skills so that officers can effectively apply technology to solve real-world problems. The goals are for every SN officer to: 1. Have a basic understanding of modern technology 2. Adopt an agile, iterative, problem-solving mindset, and 3. Connect with other teams and members of SN. # Learning Outcomes ## Learn web development, UX design and product fundamentals to build a basic web app 1. Master the core principles of web development, including front-end and back-end technologies, databases, and APIs to develop a simple web app 2. Acquire a basic understanding of user experience (UX) design principles, including user research, wireframing, prototyping, and usability testing 3. Learn the fundamentals of product development, including product lifecycle management, agile methodologies, and project management ## Utilise the design thinking approach to unpack problem statements 1. Learn the principles of design thinking, including empathy, ideation, and prototyping 2. Practice techniques for empathizing with end-users to gain insights into their needs and pain points 3. Apply ideation methods to creatively brainstorm solutions and identify innovative approaches to problem-solving ## Apply the design thinking mindset and approach to build prototypes that solve real-world problems 1. Develop and present a functional basic prototype that addresses problem statements identified during the process # Rules of Engagement ## Our Values To make the programme productive and pleasant for everyone, we request that everyone abide by the following rules of engagement:
🚀 Punctuality Please make the effort to be punctual for the sessions, especially in-person ones. This will minimise distractions to others during the session, and show respect to the speakers and facilitators who have put in the time and effort to create the learning experience for you.
✊ Self-help and help others Coding is best learnt through an experiential process of trial and error and troubleshooting. Some ways you can troubleshoot on your own are to run your code through ChatGPT (or other equivalent LLMs) and try the proposed solutions, or check [Stack Overflow](https://stackoverflow.com/), Reddit or Google to see if others have encountered the same problem that was resolved by other contributors. You can also seek help from other colleagues in your learning group or other learning groups who have coding skills and knowledge to help with troubleshooting. If your question is not urgent, leave a comment on the [FAQ page](/programme-essentials/frequently-asked-questions) and wait for it to be answered. Lastly, if all else fails or if your question is urgent, you can also approach the respective team(s) and/or POCs who have kindly volunteered their time. Before you do approach someone else about a problem with your code, please read the following guide on how to ask good questions: 1. **Before asking**\ Go through your code line by line and be clear about what each line of code is doing. Check for any typos in syntax, and make sure you have run your code through ChatGPT or Googled the errors. 2. **When asking**\ Be specific about what your ask is, with as many details as possible, including what solutions you have tried. \ You should address questions such as what language, framework, library version, software, operating system and version are you using and experiencing the problem on? Provide relevant code along with your question if possible. Explain the command or steps that led up to you experiencing the problem, and whether the problem was reproducible. Describe what you have tried to fix the problem. \ e.g. "Would anyone be able to troubleshoot with me why I encountered the error message "unable to connect to server: connection is bad: nodename nor servname provided, or not known" when using Render to deploy my app on a Mac laptop?" is a better question than "My app is not loading, can anyone help me?" 3. **After asking**\ Thank the person and do not take it for granted that they are obliged to help you. If your problem is indeed resolved, do close the loop with them (so they can celebrate your successes with you too!). If your problem is not resolved, let them know too, so they can assess if they need to refer you to someone else who might be able to help you instead.
💪 Accountability This programme was designed for you because the organisation believes in investing in your learning and development. While there are guidelines and deliverables required of you, what you take away from this programme is what you make of it. We highly encourage you to take this month of learning seriously and be accountable for your own learning. If you foresee or are experiencing any situation that may compromise this, please reach out to the organising committee to explore solutions. TechUp is a full-time programme, and TechUp is mandatory for all DTC officers and management as part of DTC's 100 hours learning initiative. If you need to be excused on any of the days due to valid reasons, you will need to inform the TechUp team and also seek your director’s approval.
# Deliverables 1. Build and deploy a sample web application together with instructors. {% hint style="info" %} Not sure what a web application is? Read about it [here](/resources/recommended-reading/web-development-and-web-application). {% endhint %} * Source code can be found [here](/programme-essentials/sample-web-app) * Your sample web application should: a. Be successfully deployed using Render.com\ b. Contain a blog post that describes your problem statement and solution (which will be your web app - see #2 below) {% embed url="" fullWidth="false" %} Sample web app {% endembed %} 2. Build your own web app that solves a problem of your choice. The web app you build should meet the requirements below. You are required to present your web app on either 27 May or 28 May. More details will be updated [here](/web-app-presentations/presentation-schedule) soon. * Articulate a user problem * Use CSS to design and style page * Interactivity with Javascript * Intuitive UX flow * Reading and writing into a database (optional) {% hint style="info" %} Web app MUST be deployed to the Internet and hosted as a live website using Render, with a custom domain name and CDN purchased from Cloudflare and connected to Google Analytics. {% endhint %} *** ## For Advanced Participants Advanced participants can challenge yourself to do one or more of the following: 1. Automated monitoring for their web app (e.g. using Datadog or Uptime Robot) 2. Implement Continuous Integration and Development (CI/CD) - write test cases that run automatically each time their app gets deployed, to help them catch errors 3. Use an automated security testing tool to prove that their web apps are secure 4. Web app can address a real existing problem statement contributed by other public service agencies # Legal Note Please take note of the following for your web apps, as they will be published live on the Internet: 1. Your web app must contain the following footer: {% hint style="info" %} **Disclaimer:** This website is created for learning purposes only. The information provided here should not be considered professional advice. Please note that we make no guarantees regarding the accuracy, completeness, or reliability of the contents of this website. Any actions you take based on the contents of this website are at your own risk. We are not liable for any losses or damages incurred from the use of this website. {% endhint %} 2. Avoid any mention of the Singapore Government, Public Service, Civil Service, or your own agency, in your web app, so that it is clear that the information provided is not attributable to the Singapore Government or other public agencies. 3. Note that the Government owns the intellectual property rights in works created by its employees in the course of employment or pursuant to the terms of their employment. 4. Ensure that your web app does not engage in, link to, or otherwise facilitate any illegal activity. 5. Avoid incorporating any functions in your web app that involve payment, transfer of funds, or receipt of monies. 6. Please bear in mind potential intellectual property as well as confidentiality and data privacy issues when designing your web app, such as: * **Copyright**. Ensure that the elements used in your web app do not infringe the rights of copyright owners. Subject-matter which may be covered by copyright includes literary works, such as books, song lyrics, news or journal articles, and, importantly, source code; dramatic works, such as film and drama scripts, and choreographic scripts for shows or dance routines; musical works, such as sheet music; artistic works, such as paintings, drawings, sculptures, photographs, engravings, and other works of artistic craftmanship; sound recordings; films; television and radio broadcasts; cable programmes; and live performance (audio).\ \ In particular: * Any source code which you incorporate into your web app should either created by you, open source, or used with permission. Avoid using copyrighted code without proper licensing. * Any logos and other images and illustrations, music, and videos that you use in your web app should either be designed by you, open source, royalty-free, or used with permission. If you are not sure about the source of an image, try to do a quick reverse image search to find out its provenance, and whether it's covered by copyright. * **Trade Marks**. A trade mark is a sign used in the course of business or trade to distinguish one's goods or services from those of others. Ensure that your web app name, logos, taglines, or any other elements do not infringe on existing trade marks, for example, those used by companies or brands. * **Confidentiality and Data Privacy**. Avoid processing, storing, or displaying any sensitive or confidential information, including confidential personal data, via your web app. This is especially if you are using databases with your web app. # Venues You may refer to the latest programme schedule during the programme for the most up-to-date venues for each session, but broadly: 1. All in-person workshops and sessions will be held at **Mapletree Business Centre (MBC) Block 30 Level 11 Jupiter Rooms**. 1. You have already been pre-registered for building access at MBC30. When you arrive, please approach the security guards at the reception counter and let them know you are here for TechUp, your name as well as your agency. 2. If you have any issues with accessing the building, please call Dawn at 9631 8021. 3. Do expect that during the morning peak period, there will be a large number of people lining up at the security counter to enter the building, and waiting to use the limited lifts at the lobby. Do come earlier if you can so that there is sufficient time for you to wait for available lifts to go up to Level 11 where the Jupiter Rooms are. 2. Office hours may be held at either OGP pantry at **Lazada One building (51 Bras Basah Road)** or **MBC30 Jupiter Room / GovTech Pantry**. Please refer to the programme schedule for more details. 3. Web App Presentations on 27 and 28 May are held at **SNDGO office at Funan**. The room allocations will be briefed to you nearer the date. 4. Demo Day on 29 May will be at **MCI Atrium** (public access is possible). ## Additional Notes: * **Please be punctual for all sessions** out of respect to the speakers who have put in the effort to make this programme fruitful for you. **We would highly encourage participants to take public transport to MBC especially in the mornings due to bad traffic.** * If you intend to take taxi / private hire cars, please cater for sufficient buffer time. **You are also highly encouraged to carpool.** Do also make use of the #carpool channel (search: Carpool on Slack) to look for others living near you to carpool to MBC for financial prudence. Please adhere to the transport claim guidelines for your respective agency. ## How to get there {% tabs %} {% tab title="GovTech Jupiter Rooms 1 & 2" %} #### Address Mapletree Business Centre (MBC) Block 30 Level 11 Jupiter Rooms 1 and 2 #### Access Please provide your full name (as in NRIC) along with your agency name, to Dawn. #### Public Transport Nearest MRT station: Labrador Park #### Parking Information Please see below for the parking charges at MBC:
{% endtab %} {% tab title="SNDGO office" %} #### Address Funan Tower 2 Level 6 #### Access Please reach out to Dawn with your full name and mobile number. #### Public Transport Nearest MRT station: City Hall, Clarke Quay #### Parking Information If you are driving, the nearest carpark is Funan's public carpark. {% endtab %} {% tab title="OGP office" %} #### Address 51 Bras Basah Road, Lazada One, #04-08 Singapore 189554 #### Access Please reach out to Dawn with your full name and mobile number. #### Public Transport Nearest MRT station: Brash Basah, Bencoolen #### Parking Information TBC {% endtab %} {% tab title="MCI Atrium" %} #### Address 140 Hill Street #01-01A. Singapore 179369 #### Access Publicly accessible #### Public Transport Nearest MRT station: Clarke Quay, City Hall #### Parking Information We highly encourage participants to take public transport due to limited parking available. MCI parking lots are reserved for VIPs. Alternatively, you may wish to park at Clark Quay, which is free for the first 2 hours. {% endtab %} {% endtabs %} # Slack {% hint style="info" %} Slack will be the main channel of communication and information dissemination for this run of TechUp. Please familiarise yourself on how to use Slack. {% endhint %} You should have already received the email invite to TechUp’s workspace on Slack, as well as the 2FA authentication email, from IMDA. Please be reminded to change your profile picture once you have set up your account, for our identification purposes. You are highly encouraged to download Slack on your phone and the laptop which you will be using for easier access during the course. For those of you who are loaning a laptop from us, Slack has already been pre-downloaded for you. Please take a few minutes to familiarize yourself with how to use Slack. If you are unfamiliar with Slack, please refer to this [short video](https://www.youtube.com/watch?v=FTuOS8E1LZk), or this [tutorial](https://slack.com/intl/en-gb/help/articles/360059928654-How-to-use-Slack--your-quick-start-guide), for a quick guide on Slack’s various features. It is important for you to familiarize yourself with the features of Slack as we will be relying on this tool heavily throughout the course for all communication purposes. *** ## Step 1: Start here {% embed url="" %} ## Step 2: Download Slack for mobile and desktop * Android users download [here](https://play.google.com/store/apps/details?id=com.Slack\&pli=1) * iOS users download [here](https://itunes.apple.com/app/slack-app/id618783545?ls=1\&mt=8) * Windows download [here](https://slack.com/intl/en-gb/downloads/windows) * Mac download [here](https://slack.com/intl/en-gb/downloads/mac) ## Step 3: Complete the tasks in the checklist below [Slack Checklist](/admin-instructions/slack/slack-checklist) ## Step 4: Read this if you're new to using Slack {% embed url="" %} # Slack Checklist ## How to get started Check off the list below to ensure that you are good to go - otherwise please reach out to Dawn for help. * [ ] Downloaded Slack for mobile and desktop * [ ] Added to a learning group channel * [ ] Added to general and help channels * [ ] \#general * [ ] \#design-help * [ ] \#engineering-help * [ ] \#admin-help * [ ] \#setup-help * [ ] Added to fun channels * [ ] \#open-jio * [ ] \#carpool * [ ] Know basic Slack functions * [ ] Send messages * [ ] React to messages * [ ] Join channel # Tooling and Software Please register accounts for: 1. [Github](https://github.com/signup) 2. [Render](https://dashboard.render.com/register) (Note: Use the create using GitHub option) 3. [Cloudflare](https://dash.cloudflare.com/sign-up) 4. [Google Analytics](https://analytics.google.com/analytics/web/provision/#/provision) ### Additional notes * You are highly encouraged to download the Google Chrome browser () if you haven’t done so already, as the developer tools work much better with Chrome than with Safari or Internet Explorer. Please also ensure that the computer you are using has administrator permissions to download additional software as needed during the TechUp programme. # Tooling Claims Instructions Each participant will be allocated a budget on tooling required for TechUp (e.g. to purchase domain name, CDN). The exact amount has been communicated ### DTC colleagues: HC colleagues have helped to raise the AOR collectively. You should submit your claims using the guide attached in the first admin email sent to you on 27 Mar 2024. ### IMDA colleagues Jaslyn has raised the AOR on your behalf, please approach her for queries on claims. ### MCI (including NAIG) colleagues Rachel Lim is your POC for all tooling-related claims. Please approach her for any queries. ### GOVTECH and all other colleagues You should raise your own AOR for the necessary tooling requirements. A sample AOR has been attached in the first admin email sent to you that you can use to adapt to your own needs. # GitHub ## Creating a GitHub account ### 1. Go to and click on Sign Up

Click on the Sign Up button

### 2. Enter your email address

Enter your email address and click continue

### 3. Create a password

Enter a password and click continue

### 4. Enter a username of your choice

Enter a username and click continue

### 5. Select your email preferences

Select your email preferences and click continue

### 6. Complete the human verification puzzle

Complete the puzzle to verify that you are human

### 7. Verify your email with the code sent to your email address

Verify your account by typing in the code sent to your email

### 8. Skip Personalisation

Skip personalisation

### 9. Congrats! You now have a GitHub account created!

🎉 You now have a GitHub account!

# Cloudflare ## Creating a Cloudflare account Follow the instructions in this page below to create your Cloudflare account. {% embed url="" %} ## Registering a Domain Name (also known as buying a domain name) ### 1. Login to Cloudflare Dashboard ([dash.cloudflare.com](https://dash.cloudflare.com/)) and click on Register Domains in the sidebar

Click on Register Domains to bring you to this page

### 2. Type in a domain name of your choice and click purchase

Enter a domain name and click on purchase

### 3. Select a 1 year registration and fill in your registrant information

Select 1 year and fill in the registrant information section

### 4. Select the payment method of your choice

Select your payment method

### 5. Click on Complete Purchase to buy your domain name

Click on complete purchase

### 6. Congrats you've just purchased your domain name!

You should see this screen once you have purchased your domain name

## Linking my domain name to my web app (using the Sample Web App as an example) {% hint style="info" %} You should have already set up your Sample Web App before linking your domain name. If you have yet to do so, please follow the instructions here [Sample Web App](/programme-essentials/sample-web-app). {% endhint %} To link your domain name to the sample web app, there are three things you will need to do: * Enable full SSL/TLS encryption on Cloudflare * Setup Render to use a custom domain name for your Sample Web App * Setup Cloudflare's DNS to point to the Sample Web App deployed on Render ### 1. Go to Cloudflare Dashboard ([dash.cloudflare.com](https://dash.cloudflare.com)) and click on the domain name you purchased

Click on your domain name

### 2. Click on the SSL/TLS tab in the sidebar

Click on the SSL/TLS tab in the sidebar

### 3. Set the SSL/TLS encryption mode to Full

Select Full to change SSL/TLS encryption mode

Click on Confirm to continue

Your SSL/TLS encryption mode should now be set to full

### 4. Go to Render Dashboard ([dashboard.render.com](https://dashboard.render.com/)) and click on your web app (in this example the sample web app is selected)

Select your web application on Render

### 5. Click on Settings to Add a Custom Domain Name

Click on Settings

Scroll down to the section on custom domains

Enter your domain name and click save

You should see something similar, click on the copy icon to copy the onrender.com URL which will be used for the nest step

### 6. Go to Cloudflare Dashboard ([dash.cloudflare.com](https://dash.cloudflare.com/)) and click on your domain name

Click on your domain name

### 7. Click on DNS to go to the page to edit your DNS Records, then click on Add Record

Click on DNS in the sidebar then click on Add Record

### 8. Add a new DNS Record

Add a new CNAME record with the Target being the onrender.com URL you copied earlier in Step 5, then click Save

### 9. Go back to your Render Dashboard and click on Verify

Click on Verify

It may take some time for the domain to be verified and for a certificate to be automatically generated

Congrats! You have now set up a custom domain name for your app!

# Render ## Creating a Render account {% hint style="info" %} Create a GitHub account first if you haven't already done so. Instructions on how to create a GitHub account can be found on this page [GitHub](/admin-instructions/tooling-and-software/github). {% endhint %} ### 1. Go to and click on GitHub. (DO NOT CREATE AN ACCOUNT VIA OTHER OPTIONS)

Click on GitHub (Do not click on other options)

### 2. Authorise Render

You will be redirected to GitHub, click on Authorise Render

### 3. Enter your email address and click Create Account

Enter your email then click Create Account

### 4. Verify your email but clicking the link sent to your email address

You will be directed to this page, go to your email to retrieve the verification link

Click on the link in your email to verify your email

### 5. Fill up the form and click on Continue to Render

You will be redirected to this page after clicking the verification link. Fill up the form and click on Continue to Render

### 6. Congrats! You now have a Render account created!

🎉 You now have a Render account!

## Deploying my Website (without a Backend) ### 1. Open Render Dashboard () and click on New Static Site.

Click on New Static Site

### 2. Connect to your repository

Click on Connect

### 3. Set the publish directory to "." and click Create Static Site

Set publish directory to "." and click Create Static Site

### 4. Congrats, your website should now start building and successfully deployed!

You website is now deployed!

## (Optional) Deploying my Web App with a NodeJS Backend ### 1. Open Render Dashboard () and click on New Web Service.

Click on New Web Service

### 2. Select Build and deploy from a Git repository then click Next

Click next once you have selected the Git repository option

### 3. Connect to your GitHub Repository

Select the repository for your NodeJS application and click connect

### 4. Enter the Build and Start Command for your application (the screenshot assumes your routing filename is server.js)

Enter the build command of "npm install" and start command of "node server.js" or "node app.js" if your filename is app.js

### 5. Change the Instance Type to Free then click Create Web Service

Select the Free tier then click on Create Web Service

### 6. Your application is now successfully deployed!

Success!

{% hint style="info" %} Refer to [Sample Web App](/programme-essentials/sample-web-app) if you are looking for instructions on how to deploy a Postgres Database on Render. {% endhint %} # Google Analytics {% hint style="info" %} Setting up Google Analytics is extremely simple, all you need to do is to: * Generate a Google Tag (just some JavaScript code) * Copy this Google Tag in the \ section of every page you want to track {% endhint %} ## How to Set Up Google Analytics ### 1. Go to and click on Get Started Today
### 2. After logging in to your Google Account, you will be redirected to the Setup page, click on Start Measuring
### 3. Enter an account name then click next
### 4. Enter a property name (and Singapore timezone and currency is selected) then click next
### 5. Select Other Business Activities and Small then click Next
### 6. Select Examine User Behaviour then click Create
### 7. Accept the Terms and click next
### 8. Select Web
### 9. Enter your website URL and enter the stream name, then click create stream
### 10. The installation instruction should pop-up automatically after approx 10-20 seconds, click on Install Manually and copy the Google tag
### 11. Finally, you will need to place this Google tag in ALL your HTML/EJS pages in the \
### 12. Remember to Commit and Push your changes to the repository once you are done! # Learning Groups
Learning Group 1
  • Celine Leo Boon June
  • Nuramira Shadrina Binte Mohamad Nasir
  • Adelyn Wan
  • Aileen Chia
  • Charlie Cheong
  • Grace Ng
  • Ho Kok Hing
Learning Group 2
  • Cheryl Lim Yan Shan
  • Chew Min Yi Desiree
  • Terence Chia
  • Chen Jinglin
  • Muhammad Zahari Bin Abu Talib
  • Priyadarshini
Learning Group 3
  • Muhammad Azhar Bin Mohamed Shukor
  • Chew Yihao
  • Bernard Toh
  • Alamelu Subramaniam
  • Sonya Chan
  • Jolene Wong
  • Soh Zi Yan
Learning Group 4
  • Jolin Ong
  • Ng Kaijie
  • Poon Hong Yuen
  • Hong Mook Yong
  • Tracy Hung
Learning Group 5
  • Jonathan Siow
  • A Kanageswari
  • Gwenda Fong
  • Shikhar Kapoor
  • Narinderjit Kaur Gill
  • Chen Kaiwei
  • Patrick Pang
Learning Group 6
  • Ivan Tay
  • Jaslyn Lim
  • Scott Tan
  • Luisa Soon
  • Tan Jia Jia Jaye
  • Sim Feng-Ji
Learning Group 7
  • Fong Siow Ting
  • Jeanette Tan
  • Lim Sing Hui
  • Joy Sarang Ng Shan Ling
  • Goh Hanyan
  • Wong Kangwen
  • Yeo Jiong Han
Learning Group 8
  • Ng Huey Yan
  • Christine Chua
  • Vincent Low
  • Wilson Loke
  • Reuben Chan
  • Weng Wanyi
Learning Group 9
  • Lim Cher Maine
  • Ng Sok Hwai
  • Huang Tingting
  • Amanda Kee
  • Charmaine Tan
  • Lye Su Yin
  • Ng Si Jia (Racheal)
Learning Group 10
  • Tan Qi Zhi
  • Kimberly Tan
  • Oh Si Qi
  • Tan Ying Hui
  • Lee Chin Ser
  • Edmund Lee
Learning Group 11
  • Keith Lee
  • Jolyn Wu
  • Jasmine Ngo
  • Wang Jiun Haur
  • Tan Yuh Huann
  • Joanna Wong
Learning Group 12
  • Tong Yanting
  • Rachel Tay
  • Evelyn Tok
  • Lim Junjie
  • Vanessa Pang
  • Ang Yee Ling
# Give Us Feedback * [x] [Survey 1 (6 to 7 May)](https://form.gov.sg/660fc21be0184b35e6d101ea) * [ ] [Survey 2 (8 May)](https://form.gov.sg/660fcde8164e7c4d430a51e1) * [ ] [Survey 3 (9 to 10 May)](https://form.gov.sg/660fc9946c1dbece87726383) * [ ] [Survey 4 (13 to 17 May)](https://form.gov.sg/660fd18e50cbb1bd73378d95) * [ ] [Survey 5 (23 May)](https://form.gov.sg/6614aa4d1024f0ace977c874) * [ ] [End of Programme Survey](https://form.gov.sg/6614bc8a1024f0ace97db25b) # Programme Materials {% tabs %} {% tab title="Slide Decks" %} #### Note: All materials produced for TechUp are owned by Smart Nation Group and Open Government Products. All content, including text, images, graphics, and other materials on this platform, are protected by copyright law. All rights are reserved. ## Programme Introduction * [Programme Introduction](https://www.canva.com/design/DAGD3E8hljM/LEzKJsoz2r-kTpOOLMzl1Q/edit?utm_content=DAGD3E8hljM\&utm_campaign=designshare\&utm_medium=link2\&utm_source=sharebutton) (6 May) * [How the Internet Works](https://docs.google.com/presentation/d/1O3754vQuw6JevvcGn9_dwySP58RjIw39NI1N0EByDlY/edit?usp=sharing) * [Administrative Briefing on Web App Presentations and Demo Day](https://docs.google.com/presentation/d/18fffslHkB1uyIu1ImXbebf9fjO2CcO3d8bdXMQ5BUi0/edit#slide=id.g4de465b1ea_0_34) ## Overviews * [Web Development](https://docs.google.com/presentation/d/1rCiGcOqQjief6DYjyo-nopyaWq5CR5ryH6mURt1R8aY/edit?usp=drive_link) * [Git, Github and Codespaces](https://docs.google.com/presentation/d/1lyLd1VGzrzGFwq4PpYr699c3i0IhC4FebSBfMCWkQSg/edit?usp=drive_link) * [HTML](https://docs.google.com/presentation/d/1lX4sG9PpmFI0krJzUWo4_PUc6seXWAG-kEia30d2bnQ/edit?usp=drive_link) * [CSS](https://docs.google.com/presentation/d/1SGU0c_D7UtgsknoXcqlBVIS5vfFl-lN6FGIdaXHS3Pc/edit?usp=drive_link) * [Javascript](https://docs.google.com/presentation/d/1kbassHxOhAj5e9WMwOnMwJZYfE_VZvDiw8mmXSNv1Uo/edit?usp=drive_link) * [Backend](https://docs.google.com/presentation/d/1-v8mg22MsVw2SSv9R_r3Sg-f8jok8zVTZJhZznlpzOk/edit?usp=drive_link) * [Hands-on](https://docs.google.com/document/d/1IkXjJIt1kvHQeT9TE2YTTHTHHjey83e-PMDawtiaW_A/edit#heading=h.exexjc5smt3y) * [How do I add a backend](https://docs.google.com/presentation/d/1TX7YQRKUvFtj-Qffdta6gu_2E6GGIZfmPjQpOA3DB8g/edit?usp=sharing) ## Design * [Experimental Mindset](https://docs.google.com/presentation/d/1k36FVB403Ml6Dh3u1T-egI6Brs2ASWu616fZ8teET5U/edit?usp=drive_link) * [Problem Statement Workshop](https://docs.google.com/presentation/d/1X4qJUZ89l3y8oBCMYtCen4U2NJmcG-pfXCxB6pzy9Gk/edit?usp=drive_link) * [What is good design](https://docs.google.com/presentation/d/1x5WVSFFjsWYPC41jTPoAPTxMPS_1k9PE9C774jbLXuM/edit?usp=drive_link) * [How to design prototypes](https://docs.google.com/presentation/d/1W13VPYOtyxyPzvdioJEjtj7NpXWyIv56X8UKLLxaq6I/edit?usp=sharing) - 7 May AM * [How to test your prototype (Part I)](https://docs.google.com/presentation/d/1S8IR8_bx_piQD2ODKfJ7SI97jkZ2vtQ2owS9r_6ykcQ/edit?usp=drive_link) - 7 May PM * [How to test your prototype (Part II) ](https://docs.google.com/presentation/d/1g2eSeUgnGkZAh2bwNcxmuS74DUHN8U0-2R3_VMZ4kcA/edit#slide=id.g2d14a94e128_0_627) ## Product * [ProductUp](https://docs.google.com/presentation/d/1w20ZBRvz1tSg70leLDN8uJwpnZwfhI2nrCAMnttuFCs/edit?usp=sharing) * [TechUp Remix: How to build a 11 star product](https://drive.google.com/file/d/1qjs0UnDl_vOuEyz9nUb-WMb0Jf6F7ttm/view?usp=sharing) * [Mobile vs Web apps](https://docs.google.com/presentation/d/1bLYfIgAauc_vK0MCQ_PgH8EAArzrlH_hcFA-0BCwg8U/edit) ## Data Science * [Google Analytics](https://docs.google.com/presentation/d/1Nu6qzipZkEMrg6vvXxxyKDLUBQYpJiVJihNfF72dtr4/edit?usp=drive_link) * Product Metrics case studies
{% endtab %} {% endtabs %} # Mandatory Reading on How the Internet Works {% hint style="warning" %} Please go through these materials before TechUp. These materials will be covered in the quiz on 14 May (30 MCQ, 70% score to pass TechUp). {% endhint %} |

Code.org YouTube playlist: How Computers Work

  1. Introducing how computers work
  2. What makes a computer, a computer?
  3. Binary & data
  4. Circuits & logic
  5. CPU, memory, input & output
  6. Hardware and software
| 25 min | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | |

Code.org YouTube playlist: How the Internet Works

  1. What is the Internet?
  2. Wires, Cables & Wifi
  3. IP Addresses & DNS
  4. Packets, Routing & Reliability
  5. HTTP & HTML
  6. Encryption & Public Keys
| 45 min | | [What happens when you type a URL in the browser and press enter?](https://medium.com/@maneesa/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a) (Login to Medium required) | 7 min | # Mandatory Course (Udemy) [The Complete 2024 Web Development Bootcamp](https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12638830#notes) (accessible on Udemy via LEARN app) 1. You are encouraged to go through this online course before the programme so that you can get a good sense of what is needed to build a web app during the programme. 2. We have selected a few of the more important modules below that we recommend participants to focus on for essential foundation knowledge. 3. As coding is a skill that takes consistent revision and practice to build, we strongly recommend officers to come in to TechUp having perused the topics (even if briefly) and bring any questions you have, so that TechUp can serve to reinforce key concepts and skills in web development. {% hint style="info" %} Those indicated in❗️**bold are mandatory for TechUp**. {% endhint %} {% tabs %} {% tab title="❗️Front-End + HTML" %}
TitleUdemy Link# of LecturesDuration
❗️Front End Web DevelopmentUdemy Section 1937 min
❗️Introduction to HTMLUdemy Section 2851 min
❗️Intermediate HTMLUdemy Section 3751 min
❗️Multi-Page WebsitesUdemy Section 471 hr 10 min
{% endtab %} {% tab title="❗️CSS" %}
TitleUdemy Link# of LecturesDuration
❗️Introduction to CSSUdemy Section 5659 min
❗️Intermediate to CSSUdemy Section 751 hr 33 min

Bootstrap

Helps you with nice default HTML elements like buttons and nav bar

Udemy Section 1141 hr 40 min

Capstone Project 2 - Personal site

By the end of the course, if you have done the capstone projects, you will have a personal repository of projects to showcase on GitHub.

Udemy Section 131Around 1 hour for assignment
{% endtab %} {% tab title="❗️Javascript, DOM" %}
TitleUdemy Link# of LecturesDuration
❗️Introduction to Javascript ES6Udemy Section 14282 hr 28 min
❗️Intermediate JavascriptUdemy Section 15191 hr 30 min
❗️The Document Object Model (DOM)Udemy Section 16956 min
Boss Level Challenge 1 - The Dicee GameUdemy Section 171120 min (1-2 hours for assignment)
❗️The Unix Command Line Udemy Section 21530 min
{% endtab %} {% tab title="❗️Git, GA" %}
TitleUdemy Link# of LecturesDuration
❗️Git, GitHub and Version ControlUdemy Section 2791 hr 17 min
❗️How to set up Google Analytics (GA)YouTube tutorial-6 min
{% endtab %} {% endtabs %} We highly recommend completing the additional courses below to have an understanding on full stack web development. {% tabs %} {% tab title="Backend" %}
TitleUdemy Link# of LecturesDuration
Backend Web DevelopmentUdemy Section 22221 min
Node.jsUdemy Section 2381 hr 6 min
Express.js with Node.jsUdemy Section 2482 hr 1 min
EJS (Embedded JavaScript)Udemy Section 2561 hr 30 min
{% endtab %} {% tab title="APIs" %}
TitleUdemy Link# of LecturesDuration
APIs (Application Programming Interface)Udemy Section 2882 hr 28 min
{% endtab %} {% tab title="Databases (SQL + PostgreSQL)" %}
TitleUdemy Link# of LecturesDuration
Databases Udemy Section 31222 min
SQL Udemy Section 32636 min
PostgreSQL Udemy Section 33164 hr 11 min
{% endtab %} {% endtabs %} [^1]: optional but useful [^2]: optional but it will help you experiment with your first website (E.g. Steph’s first ever [website](https://stephsiow.github.io/cv/)) [^3]: optional but fun and useful for practice [^4]: this will be used to analyse your webapp’s metrics e.g. user traffic # Sample Web App *This is the same sample web app deployed on* [*https://sample.techup.live*](https://sample.techup.live) {% hint style="info" %} **In this exercise, we will teach you how to:** 1. Create a GitHub repository to store your sample code (in Git files) 2. Upload ("commit and push") your HTML + CSS + JS code to GitHub 3. Connect a sample website to a database on Postgres **This exercise is meant to simulate how you would deploy your live website onto the Internet.** {% endhint %} ## Web technologies powering the Sample Web App The Sample Web App is hosted on Render.com, a cloud-based application hosting platform with the following components: * **Frontend:** HTML, CSS and Javascript * **Backend:** NodeJS, Express, EJS * **Database:** Postgres

Extremely simple System architecture of Sample Web App

## Sign in to GitHub and Render You will need to be signed in to GitHub and Render.com before you setup the Sample Web Application. For instructions on how to sign up for a GitHub and Render account respectively, please refer to the following pages. {% hint style="info" %} **Note:** You will need to create a GitHub account first before creating a Render account. You will be using the "Sign up with GitHub" option when creating an account on Render. {% endhint %} {% content-ref url="/pages/Kxgr76GLETL2u9JYCsPm" %} [GitHub](/admin-instructions/tooling-and-software/github) {% endcontent-ref %} {% content-ref url="/pages/O6j8XYlpghO7vu47M4Lo" %} [Render](/admin-instructions/tooling-and-software/render) {% endcontent-ref %} ## Instructions on setting up your sample web app {% hint style="info" %} If you prefer to watch a video of this setup you may watch it [here](https://drive.google.com/file/d/18UTrfh8eo3emeDxEZ32Kig6N2qdvDi-c/view?usp=sharing) instead. {% endhint %} ### 1. Create a new GitHub Repository * Go to to create a new repository * Type in your own repository name (this could be any name) * The description for your repository can be empty * Your repository should by default be Public * Ensure that you check the "**Add a README file**" * Ensure that you select **Node** as the .gitignore template * The license can be at it's default setting of None * Note that your default branch may be called "master" or "main", this is okay and you can leave it (mine is currently set as "develop"). * Click on "Create repository" to create your new GitHub Repository

A sample of the options selected before clicking "Create repository"

### 2. Open your newly created repository in Codespaces * You should have been re-directed to your newly created repository * Click on the green "Code" button, select the "Codespaces" tab and click **"Create Codespace on develop"**. (Note: your branch may be called "master" or "main" and this is fine)

Click on create codespace to open up codespaces for your repository

### 3. Download the source code and unzip the file * Your GitHub Codespace should have opened up in a new tab after creating a codespace in the previous step. ### Click on the link below to download the source code for the sample app here and unzip the file: {% file src="/files/yMGenNBkeNuBol9lAHtS" %}

You should see the following files and folders after unzipping the zip file  

### 4. Drag and drop sample app code into Codespaces * After completing Step 2, a new tab should have opened with your Codespace similar to the image shown below.

Your Codespace for your newly created GitHub repository

* Drag and drop all files and folders in Step 3 into the sidebar of your Codespace. IMPORTANT: Ensure that you select all the files and folders INSIDE the unzipped file, do not upload the whole zip file (see the below images if you are unsure).

Select all the files and folders INSIDE the unzipped file to upload to Codespace

Drop the selected folders and files in the section marked by the red box

Ensure you drag and drop the correct files in the right location

* This uploads the sample web app source code to your Codespace * After dragging and dropping, your Codespace should look like this with the following files in the sidebar

Note the newly added folders of "prisma", "public", "views" and files "package-lock.json", "package.json", "server.js"

### 5. Commit & Push to your repository * Click on the Source Control icon (the icon which has blue numbers on it, in the image above it's the third tab on the left) * Enter a commit message of "Uploaded sample code" * Click on the dropdown next to "Commit" and click on "Commit & Push". * Note that you will have to click on the drop down arrow for "Commit & Push" to show up

Click on the Source Control tab, write a commit message and click on "Commit & Push" from the drop down list

* If the following pop-up appears, select "Always"

Select "Always" should this pop-up appear after clicking "Commit & Push"

* Another pop up may appear at the bottom right of your screen, select the option of "Yes"

Select "Yes" should this pop-up appear on the bottom right of your screen

* Check that your files are in your GitHub repository by going to and selecting the repository you created in Step 1

Select your repository in the sidebar on the left

* You should now see that there are the newly uploaded files in this repository

The files should now be in your repository you created

### 6. Create a new PostgreSQL database on Render * Go to to create a new PostgreSQL database on Render. * Type in a Name for your PostgreSQL instance (I've named mine techup-sample-database) * Leave the Database field blank * Leave the User field blank * Change the Region to "Singapore (Southeast Asia) * Leave PostgreSQL Version as the default value of 16 * Leave the Datadog API Key field blank * Change your instance type to FREE * Click on "Create Database"

Enter a Name for your instance and change the Region to Singapore while leaving other fields as their default values

Change your Instance Type to FREE before clicking on Create Database

* Your database should now be created (after about 30 seconds) * Scroll down to the section on Connections and take note of the `External Database URL` * Copy this `External Database URL` to a blank word document (or anywhere else such as Notepad) as you will be using it later to add it as an environment variable. * **IMPORTANT: PLS ENSURE YOU HAVE COPIED THIS URL AS YOU NEED IT LATER.**

Click on "Copy to clipboard" for the External Database URL to copy this URL for use later

### 7. Create a new Web Service on Render * Go to to create a new Web Service (alternatively you may also click on the purple New + button at the top of the page and select Web Service) * Ensure "Build and deploy from a Git repository" is selected then click Next

Ensure the first option of "Build and deploy from a Git repository" is selected

* On the right column you will need to click on "+ Connect Account" to connect your GitHub account to Render. * Click on "Connect" for the repository name which your created in Step 1

Click Connect on the repository created in Step 1 (if this dropdown list is not showing you will need to click on + Connect Account on the page to connect your GitHub account to Render)

* Leave the Name field as it's default value * Ensure that the Region is set to "Singapore (Southeast Asia)" * Ensure that your Branch is selected (yours may be called "master" or "main") * Leave the Root Directory field blank * Leave the Runtime as "Node" * Change the Build Command to `yarn; npx prisma db push; npx prisma generate`

Change the Build Command to as shown above

* Add the Start Command of `node server.js` * Change the Instance Type to FREE

Add the Start Command to "node server.js" and change the Instance Type to FREE

* Add a new Environment Variable of name `DATABASE_URL` with the value of your copied `External Database URL` in Step 6. *(If you have misplaced this URL, not to worry. Go to* [*https://dashboard.render.com/*](https://dashboard.render.com/) *and click on your database. Scroll down and simply copy the External Database URL again.)*

Create a new Environment Variable of "DATABASE_URL" and paste the External Database URL copied earlier as its value

* Click on the "Create Web Service" button to start deploying * You will be redirected to a new page which shows the logs of the server build happening. It would take approximately 2-4mins for the the server to full deploy your app. * Your app is deployed once you see the line "==> Your service is live 🎉" in the logs.

Your app is ready once you see "Your service is live 🎉"

### 8. Accessing your newly deployed web application * At the top of the same deploy page with the logs, you will see a URL (in my case it is ). Click on this link and it will bring you to your web application.

Click on the URL at the top left to bring you to your newly deployed web app

* You should now be able to view the sample web app which you have deployed on your own Render server!

Congrats!! You have successfully deployed the sample web app on your own Render server

* Have fun playing around with the sample web app by Adding and Deleting blog posts! ## Optional: How do I view what is inside my Postgres database which I created on Render.com? ### 1. Download and install TablePlus from

Dowload TablePlus for Mac or TablePlus for Windows depedning on what laptop you have

### 2. Open TablePlus and click on the + icon to add a new connection

Click on the + icon to add a new connection

### 3. Click on Import from URL

Click on Import from URL

### 4. Paste the `External Database URL` (which you copied earlier when setting up Postgres) into the text field then click Import

Paste your External URL into the field then click Import

### 5. Click on Connect (you may rename the "Name" field or leave it as it's default)

Click on connect

### 6. You have now successfully connected to the database from TablePlus and you may click on the Post table in the left sidebar to view the contents

Success! You can click on the Post table to view the contents

# Frequently Asked Questions Have a question not on this list? Leave a comment and we will get it answered! ## Attendance * **I cannot attend the programme on some days. What should I do?**\ Get approval in writing from your Director and inform the TechUp organising team. * **I have urgent work I need to clear during the programme.**\ Please write to DS and your Director, and copy HCD, Ruimin and Yunxi. If you appear to be doing work during the programme without prior clearance/approval, DS and your Director will be notified. ## Others * **Who should I approach if I need help?**\ You can try these methods here for self-help or peer-help first. If all else fails, depending on the domain of your question, please approach the organising team and/or volunteers. ## Problem Statement * **What if I don’t have a problem statement?** There are plenty of problems to solve! 🙂 Just look around and see what is bothering you or someone around you in your daily lives. A simple guide to start crafting a problem statement can be found [here](https://www.build.gov.sg/problem-statement-guide/). * **Can I change my problem statement halfway?** Yes, as long as you are able to build your solution in time for the web app presentation on 27 and 28 May. * **Does my web app need to solve a problem? What kind of problem?** Yes, the deliverable for TechUp is to build your own web app that solves a problem of your choice. The web app you build should meet the requirements below: {% hint style="success" %} 1. Articulate a user problem 2. Use CSS to design and style page 3. Interactivity with Javascript 4. Intuitive UX flow 5. Reading and writing into a database (optional) {% endhint %} * **How can I find inspiration on what type of webapp to build?** You may find inspiration on the webapps built by our previous run of TechUp participants [here](https://techup.live/). Alternatively, you can follow the step-by-step tutorials below for additional practice:

Making a To-do List with EJS:

App Brewery Section 22

Sample Web app tutorials: To-do list and Quiz app
*** ## Technical ### Overview on Web Development * **What is a static vs dynamic website?**
Static WebsiteDynamic Website
DefinitionA static website displays the same content to all visitors in the same format. It is made up of a fixed number of pre-built files stored on a web server, and content won’t change unless the HTML source code is edited.A dynamic website presents different information to different visitors (depending on their location, local time & preferences), making for a more tailored and interactive experience.
Scripting LanguageFiles are written in HTML, CSS, and JavaScript, which are called “client-side” languages because they execute in the user’s web browser.To build pages on the back end, dynamic websites employ “server-side” languages like PHP, Python, Ruby, & JavaScript, in addition to “client-side” languages.
DatabaseDoes not interact with a database.May interact with databases to store and retrieve dynamic content.
ExamplesBrochure websites, personal blogs, portfolio sites, school websites (e.g. https://www.nanhuapri.moe.edu.sg/) Facebook, Netflix, Twitter, Youtube, Gmail
Use caseStatic websites work best for sites with fewer pages that don’t require frequent updates or changes. (E.g company webpages)Dynamic websites are those which are content heavy and user-driven. (E.g. real estate listing websites)
{% hint style="info" %} Read more here: {% endhint %} * **What is the difference between a website vs a web app?**
WebsiteWeb Application
FunctionWebsites serve to inform users. The content on a website can be viewed, read, or listened to, but the user cannot manipulate it.Web apps serve to help users. The content on web apps is not only viewable but allows users to manipulate data. Anything on the Internet that performs a service is likely a web app.
ComplexityWebsites are just a collection of static web pages.While web apps can be built with the same web technologies as websites (JavaScript, HTML, and CSS), apps will also need to use more advanced programming languages (like PHP, frameworks, and server-side scripts). Additionally, UX/UI design is more crucial to web applications since users actively interact with them.
AccessPublic access is a hallmark of websites.Web apps frequently require user authentication because they provide services customised to the user’s requirements.
Use caseIf you want users to get to know your business and the products or services you offer, a website is probably the best choice for you.If you want to provide a service to users, you will want to develop a web application.
{% hint style="info" %} Read more here: {% endhint %} * **What are the common frameworks used in tech companies? Do they actually use HTML, CSS, JS, Node.js?** HTML, CSS, JavaScript are foundational technologies that are still widely used. HTML for structuring web content, CSS for styling, and JavaScript for adding interactivity and dynamic behavior to web pages. Below are some common frameworks:
Frontend Frameworks * React.js: Developed by Facebook, it's widely used for building user interfaces, particularly for single-page applications. * Angular: Developed and maintained by Google, Angular is a comprehensive framework for building web applications. * Vue.js: Known for its simplicity and ease of integration, Vue.js is increasingly popular for building interactive web interfaces.
Backend Frameworks * Node.js: Though not exactly a framework, Node.js is a runtime environment that allows you to run JavaScript on the server-side. Many frameworks are built on top of it, such as Express.js. * Express.js: A minimal and flexible Node.js web application framework, often used for building APIs and web servers. * Django: Written in Python, Django is a high-level web framework that encourages rapid development and clean, pragmatic design.
Database Frameworks * MongoDB: A NoSQL database, often used with Node.js and Express.js for full-stack JavaScript applications. * MySQL/PostgreSQL: Relational databases that are commonly used in conjunction with various backend frameworks.
Mobile Development * React Native: A framework for building mobile applications using React, allowing developers to write code once and deploy it on both iOS and Android platforms. * Flutter: Developed by Google, Flutter is a UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
### Getting Started * **What is the Terminal / Command line?** The terminal is a software application that provides access to the command line interface. It's a graphical application that emulates a text-based terminal. The command line is the literal line where you enter commands and the cursor blinks. `Windows - Command Prompt`
`Mac - Terminal`
{% hint style="info" %} Read more here: {% endhint %} * **What is localhost?** In the context of web development, developers use "localhost" to refer to the local web server running on their own computer. They can develop and test web applications locally before deploying them live to a remote server. This means that other devices on the same network or on the internet cannot directly access web pages hosted on localhost, as it resolves to the loopback IP address (usually 127.0.0.1), which is reserved for communication within the same device.
{% hint style="info" %} Read more here: {% endhint %} ### Javascript * **What is the difference between null and undefined in javascript?** -> null is typically used as a placeholder to indicate that a variable or object property does not currently have a value, or that a function returns no meaningful result.
-> undefined typically indicates a variable that has been declared but has not been assigned any value, or an object property that does not exist.
### Deployment * **Can I use other platforms to deploy the web app, e.g. Netlify, GitHub Pages?** We encourage participants to use **Render** as the hosting platform, so that all the tooling is standardized and we can help troubleshoot issues with less complexity. * **Why am I encountering an error when deploying on Render?** Check whether you have copied your external database url correctly. Troubleshoot using ChatGPT - paste the error message there. # Policy Takeaways ## [How The Internet Works](https://docs.google.com/presentation/d/1O3754vQuw6JevvcGn9_dwySP58RjIw39NI1N0EByDlY/edit?usp=sharing) 1. **Servers.** New paradigms: **Cloud** is more secure, more scalable and cheaper than on premise if configured optimally. In an age where the Internet is borderless, "data sovereignty" or "digital sovereignty" means knowing **where your information is routed to and stored**, e.g. locally or internationally. 2. **Addressing.** ICANN and other regulatory bodies decide the allocation of IP addresses and domains, who then farm them out to governments or private sector bodies. 3. **Content Delivery Network (CDN).** The Internet by default has built in multiple redundancies, with multiple copies of Internet pages all over the world. Even if one server goes down, the rest of the Internet does not go down. ## [Design Thinking Workshops](https://docs.google.com/presentation/d/1X4qJUZ89l3y8oBCMYtCen4U2NJmcG-pfXCxB6pzy9Gk/edit) 1. Coming up with a good problem statement is not just applicable to building software, but also to any other domain. This allows you to pinpoint accurately and precisely what problem you are solving for, and therefore identify an appropriate and suitable solution. 2. We had gone through the design thinking process, where direct user feedback is very important to iterate on products. Unlike traditional policy environments where policies are implemented over long cycles to the magnitude of months and years, **this iteration is possible in digital**, because of how quickly changes can be made (e.g. styling, content) and propagated to live apps, to the magnitude of seconds, minutes and hours. ## [HTML](https://docs.google.com/presentation/d/1lX4sG9PpmFI0krJzUWo4_PUc6seXWAG-kEia30d2bnQ/edit?usp=sharing) 1. Many aspects of the Internet's protocols, standards and software are **open source** and a product of **collective, collaborative effort** across many decades. \ This was one of the fundamental principles of the design of the Internet's distributed, decentralised infrastructure, so no one entity has unilateral control over its infrastructure and protocols, promoting trust and reliability. 2. Relatedly, there is no point trying to make your HTML code secret as the source code of all HTML pages on the Internet can be viewed by right clicking -> 'Inspect'. 3. Of course, certain secrets like proprietary algorithms, API keys, passwords need to be kept very safe. But a lot of what is available on the Internet is **publicly accessible and open source**. ## [CSS](https://docs.google.com/presentation/d/1SGU0c_D7UtgsknoXcqlBVIS5vfFl-lN6FGIdaXHS3Pc/edit#slide=id.g270c626dd25_0_152) 1. The **separation of concerns** in web development involves dividing different aspects of a web application into distinct sections, each responsible for a specific part of the functionality. HTML is responsible for structure and content, while CSS is for presentation and styling. This allows each layer (HTML, CSS) to be clearly read, updated independently and in parallel, and reused across different documents. 2. We had gone through the design thinking process, where direct user feedback is very important to iterate on products, as **user behaviour is unpredictable**. Unlike traditional policy environments, **iteration based on user feedback is possible in digital**, because of how quickly changes can be made (e.g. styling, content) and propagated to live apps.\ Small changes to the styling and content can affect user behaviours and consequently achieve different outsized outcomes. Hence, tech companies spend large amounts of time and money to get these small changes right to drive the outcomes and behaviours they want, e.g. tweaking colours, buttons, logos, layout to drive more consumer spending. ## [JavaScript](https://docs.google.com/presentation/d/1kbassHxOhAj5e9WMwOnMwJZYfE_VZvDiw8mmXSNv1Uo/edit?usp=sharing) 1. Once again, **separation of concerns** means that different parts of an application can be worked on at the same time. \ In particular, many companies divide their software engineers across frontend and backend engineering. We have touched backend (Node.js to run the script.js) for the first time. 2. JavaScript is designed to handle **events** such as user inputs, clicks, and other actions, making web pages responsive and interactive. This is what gives 'functionality' to the website beyond a static site. 3. Features like callbacks, promises, and async/await allow JavaScript to perform tasks asynchronously, crucial for handling **operations like API calls** without freezing the user interface. # Recommended Reading ## Coming soon! # How does the Internet work? {% embed url="" %} {% embed url="" %} # Web Development & Web Application ## What is a Web App? {% embed url="" %} ## Full Stack {% hint style="info" %} [Full stack development is the process of developing both the frontend and backend of applications. Any application has a frontend (user-facing) component and a backend (database and logic) component.](https://aws.amazon.com/what-is/full-stack-development/#:~:text=Full%20stack%20development%20is%20the,user%20interactions%20with%20the%20application.) {% endhint %} ### Front End The **front end** (sometimes called **client side**) of a web app refers to the visible part of website or web application which is responsible for user experience. The user directly interacts with the front end portion of the web application or website.

Source: https://www.upwork.com/resources/beginners-guide-back-end-development

### Backend The **back end** refers to the **server-side** development of web application or website with a primary focus on how the website works. It is responsible for managing the database through queries and APIs by client-side commands.

Source: https://www.upwork.com/resources/beginners-guide-back-end-development

Courses * [Full Stack Crash Course](https://learncsc.udemy.com/course/full-stack-crash-course/) * [100 Days of Code](https://learncsc.udemy.com/course/100-days-of-code-web-development-bootcamp/learn/lecture/26934982#overview)
# Design Thinking / User Experience (UX)
Courses * [Learn Figma](https://www.figma.com/resource-library/design-basics/) * [Intro to UX: Fundamentals of Usability](https://skl.sh/3qeLaqz) (1hr 20min) * [Udemy UX Design & User Experience Design Course - Theory Only](https://learncsc.udemy.com/course/how-to-change-careers-and-become-a-ux-designer/learn/lecture/5791876?start=0#overvieww) (3hr) * [Design Systems for Developers](https://www.learnstorybook.com/design-systems-for-developers/) (9 chapters) * [Udemy User Experience Design Essentials](https://learncsc.udemy.com/course/ui-ux-web-design-using-adobe-xd/learn/practice/1094222?start=start-page#overview) (12hr) * [Master Digital Product Design](https://learncsc.udemy.com/course/master-digital-product-design-ux-research-ui-design/learn/lecture/16982102#overview)
Articles * [An overview of Figma for developers](https://www.figma.com/best-practices/tips-on-developer-handoff/an-overview-of-figma-for-developers/) * [Figma Constraints & Auto Layout for web developers](https://levelup.gitconnected.com/figma-constraints-auto-layout-for-web-developers-5625d8a7d65c) * [A Figma publication for design systems creators, designers, developers, and managers](https://www.designsystems.com/) * [Design Better Forms](https://medium.com/nextux/design-better-forms-96fadca0f49c) * [Design Better Data Tables](https://medium.com/nextux/design-better-data-tables-4ecc99d23356) * [DesignOps at Airbnb](https://airbnb.design/designops-airbnb/) * [The Comprehensive 8pt Grid Guide](https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179)
Videos * [Gestalt Psychology and Why It's Essential for Good Design](https://www.youtube.com/watch?v=dk7cXdjX2Ys) * [What is the UX design process](https://www.youtube.com/watch?v=Um3BhY0oS2c\&t=29s) * [Bringing Simplicity to Complexity: How to Design at Scale](https://www.youtube.com/watch?v=cgKMuaW-Yw8) * [Interface Design PRO-TIPS inside Figma](https://www.youtube.com/watch?v=JwRGM67gxs8) * [Design Systems, when and how much?](https://youtu.be/Hx02SaL_IH0) * [How to think like a Visual Designer](http://youtube.com/watch?v=hlI6xGfBjkQ) * [Design Systems at Zendesk](https://www.youtube.com/watch?v=8sH5VqYqOU4) * [Problem Solving Exercises](https://www.youtube.com/playlist?list=PLxk9zj3EDi0UQ3mq7k_-6pSoCQKS11iLd)
Books * [Refactoring UI](https://info.techup.live/) (Adam Wathan, Steve Schoger) * [How Customers Think](https://www.amazon.sg/How-Customers-Think-Essential-Insights/dp/1578518261) (Gerald Zaltman) * [UX Design: The Definitive Beginner’s Guide](https://www.uxpin.com/studio/ebooks/ux-design-definitive-beginner-guide/) * [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook) * [The Design of Everyday Things](https://www.amazon.sg/Design-Everyday-Things-Revised-Expanded/dp/0465050654) * [Don't Make Me Think](https://www.amazon.sg/Dont-Make-Think-Revisited-Usability/dp/0321965515)
# Product Management
Articles * [Product Coalition](https://productcoalition.com/) * [12 Things about Product-Market Fit](https://a16z.com/2017/02/18/12-things-about-product-market-fit/) * [The Agony and Ecstasy of Building with Data](https://medium.com/the-year-of-the-looking-glass/the-agony-and-ecstasy-of-building-with-data-56215764d67c) * [Ruthless Prioritisation](https://blackboxofpm.com/ruthless-prioritization-e4256e3520a9) * [The Only Thing that Matters](https://pmarchive.com/guide_to_startups_part4.html) * [Managing and developing Product Managers](https://blackboxofpm.com/managing-and-developing-product-managers-2f9a3963fab6) * [Intercom Product Management](https://marketing.intercomcdn.com/assets/pm-book/v3/Intercom_on_Product_Management.pdf) * [Cloud Security: A Primer for Policymakers](https://carnegieendowment.org/2020/08/31/cloud-security-primer-for-policymakers-pub-82597) * [Shapeup By Basecamp](https://basecamp.com/shapeup/0.3-chapter-01) * [Local-First Software](https://www.inkandswitch.com/local-first.html)
Courses * [Become a Product Manager](https://learncsc.udemy.com/course/become-a-product-manager-learn-the-skills-get-a-job/learn/)
Books * [Handbook on being a product manager](https://about.gitlab.com/handbook/product/) * [The Product Book](https://www.amazon.com/Product-Book-Become-Great-Manager-ebook/dp/B071HFBGXR#:~:text=Based%20upon%20Product%20School%27s%20curriculum,here%20to%20help%20you%20succeed!) * [The Lean Product Playbook](https://www.amazon.sg/Lean-Product-Playbook-Innovate-Products/dp/1118960874) * [Swipe to Unlock: A Primer on Technology and Business Strategy](https://swipetounlock.com/) * [Zero to One](https://www.amazon.sg/Zero-One-Notes-Startups-Future/dp/0804139296) * [Loonshots: How to nurture the crazy ideas that win wars, cure diseases and transform industries](https://www.amazon.sg/Loonshots-Nurture-Diseases-Transform-Industries/dp/1250185963) * [On Writing Well: The Classic Guide to writing non-fiction](https://www.amazon.sg/Writing-Well-Classic-Guide-Nonfiction/dp/0060891548)
# Data Science & Machine Learning
Videos * [Introduction to machine learning problem framing](https://developers.google.com/machine-learning/problem-framing) * [Machine learning crash course](https://developers.google.com/machine-learning/crash-course/ml-intro) * [2020 Machine Learning Roadmap](http://youtube.com/watch?v=pHiMN_gy9mk)
Articles * [15 Important product metrics you should be tracking](https://amplitude.com/blog/product-metrics-guide) * [Why Product Metrics Matter](https://www.productplan.com/learn/product-metrics-matter/) * [Qualtrics - Product Metrics: What you Need to Know](https://www.qualtrics.com/au/experience-management/product/product-metrics/) * [Product Metrics Framework](https://userpilot.com/blog/product-metrics-framework/) * [Google - good data analysis](https://developers.google.com/machine-learning/guides/good-data-analysis) * [The Data Science Life-Cycle](https://towardsdatascience.com/stoend-to-end-data-science-life-cycle-6387523b5afc) * [Don’t trust data scientists to set performance metrics](https://towardsdatascience.com/dont-trust-data-scientists-to-set-performance-metrics-908bcd80bac6) * [The unspoken rules of visualisation](https://datajournalism.com/read/longreads/the-unspoken-rules-of-visualisation) * [Introduction to Natural Language Processing for Text](https://towardsdatascience.com/introduction-to-natural-language-processing-for-text-df845750fb63) * [Amenity Detection and Beyond — New Frontiers of Computer Vision at Airbnb](https://medium.com/airbnb-engineering/amenity-detection-and-beyond-new-frontiers-of-computer-vision-at-airbnb-144a4441b72e) * [Build a Recommendation Engine With Collaborative Filtering](https://realpython.com/build-recommendation-engine-collaborative-filtering/#:~:text=Collaborative%20filtering%20is%20a%20family,type%20of%20collaborative%20filtering%20approach.) * [A Visual and Interactive Guide to the Basics of Neural Networks](http://jalammar.github.io/visual-interactive-guide-basics-neural-networks/)
Books * [Measure What Matters](https://www.amazon.sg/Measure-What-Matters-Simple-Drives/dp/024134848X/ref=asc_df_024134848X/?tag=googleshoppin-22\&linkCode=df0\&hvadid=389049660685\&hvpos=\&hvnetw=g\&hvrand=3444570859377704106\&hvpone=\&hvptwo=\&hvqmt=\&hvdev=c\&hvdvcmdl=\&hvlocint=\&hvlocphy=9062526\&hvtargid=pla-440960730426\&psc=1\&mcid=ab01fd7d565f3c368af189cdcfd69e09) (John Doerr) * [The Signal and the Noise](https://www.amazon.com/Signal-Noise-Many-Predictions-Fail-but/dp/0143125087) (Nate Silver) * [Lean Analytics: Use Data to Build A Better Startup Faster](https://leananalyticsbook.com/) (Alistair Croll & Benjamin Yoskovitz)
# Format ## Administrative Briefing {% hint style="info" %} Please refer to [this deck](https://docs.google.com/presentation/d/18fffslHkB1uyIu1ImXbebf9fjO2CcO3d8bdXMQ5BUi0/edit#slide=id.g4de465b1ea_0_34) for information on the Web App Presentations. {% endhint %} ## Detailed Web App Requirements As earlier mentioned in the [TechUp Deliverables](https://info.techup.live/about-techup/why-do-techup/deliverables) section, at the end of TechUp you will need to present your web app that meets the following requirements: 1. **Articulate a user problem** * Clearly identify and describe a specific problem or need that users face, which your web app aims to address or solve. This should serve as the driving force behind the development of your app. * *In plain English: There is a clear problem that your web app is solving, in one sentence.*
2. **Use CSS to design and style page** * Implement visually appealing and cohesive design elements throughout the web app. This includes layout structuring, colour schemes, typography, and overall aesthetic enhancements. * *In plain English: Your web app is not jarring or ugly at first glance. You have chosen decent colours, fonts, sizes and layout that is not unpleasant.*
3. **Interactivity with Javascript** * Implement interactive features and functionalities using JavaScript. This could involve dynamic content updates, form validation, event handling, and other client-side scripting techniques to provide interactivity. * *In plain English: When you click a button, something happens on your web app (that is not just taking you to another web page).*
4. **Intuitive UX flow** * Design a clear and intuitive user experience (UX) flow for your web app, encompassing navigation structure, User Interface (UI) design and information presentation. * *In plain English: Your user can easily understand how to use the web app to efficiently accomplish their tasks/goals.*
5. **Reading and writing into a database (optional)** * Optionally, integrate functionality to read and write data into a database. This could involve storing user information, managing content, or any other data persistence requirements that support the core functionality of the web app. * *In plain English: you can read, write, update and/or delete data from a database.*
**In addition, the web app MUST be deployed to the Internet, and hosted as a live website using** [**Render**](https://info.techup.live/admin-instructions/tooling-and-software/render) **with a purchased domain name and CDN using** [**Cloudflare**](https://info.techup.live/admin-instructions/tooling-and-software/cloudflare)**.** In other words, your web app cannot just be hosted on your local computer without being hosted on the Internet. Your web app should also be connected to **Google Analytics**. ## Objective **The primary objective of the web app presentations is to receive feedback as part of the learning process,** as a culmination of the knowledge and skills you have built up over the month of TechUp. Your web apps serve as a tangible representation of your learning journey, showcasing your ability to apply theoretical concepts like design thinking and web development to real-world projects.
## Presentation Details You will be divided into your Learning Groups for your web app presentations over a 2-hour slot (see [Presentation Schedule](https://info.techup.live/web-app-presentations/presentation-schedule)). The presentations will be attended by some instructors/stakeholders (e.g. MCI Products Directorate Director Chen Kaiwei / DD Li Zheng; OGP's Policy and Product leaders). **Each participant will have 5 minutes to:** 1. State their problem statement 2. Click through the web app to show what their web app does (please have your web app open for this segment) 3. Explain what user research they did to confirm the problem statement, make adjustments to the web app along the process etc. (if any) 4. Explain how their JavaScript code in their web app works (please navigate to show the room your code for this segment). Slides are not necessary, but you are welcome to show them if you have any. Our panel will then ask any clarifying questions and give feedback on your engineering, design and product considerations for around 5 minutes. :smile: ## Pass Criteria TechUp is the baseline, minimum requirement for tech policy officers in DTC. If you meet all 4 mandatory criteria above (and your web app is live on the Internet and connected to a domain name), you will have deemed to have passed TechUp and will receive a graduation certificate. Congratulations! :clap: This is but the start of a lifelong journey of learning about this fast-evolving domain. If you require more time or have any exigencies to take care of on 27 or 28 May, fret not. You will have a **6-month grace period** to run through the materials again before presenting your completed web app at a subsequent make-up session 6 months later. *Please approach the organising committee to let us know and we will schedule you for a make-up presentation.* # Presentation Schedule ## 27 May | Timeslot | Gigabyte | Terabyte 1 | Terabyte 2 | | --------------- | ------------------- | ------------------- | ------------------- | | 10am - 12pm | Nov 23 participants | Nov 23 participants | Nov 23 participants | | 12pm - 1.30pm | Lunch break | Lunch break | Lunch break | | 1.30pm - 3.30pm | LG 1 | LG 2 | LG 3 | | 3.30pm - 4.00pm | Break | Break | Break | | 4.00pm - 6.00pm | LG 4 | LG 5 | LG 6 | ## 28 May | Timeslot | Gigabyte | Terabyte 1 | Terabyte 2 | | --------------- | ------------------ | ------------------ | ------------------ | | 10am - 12pm | LG 7 | LG 8 | LG 9 | | 12pm - 1.30pm | Lunch break | Lunch break | Lunch break | | 1.30pm - 3.30pm | LG 10 | LG 11 | LG 12 | | 3.30pm - 4.00pm | Break | Break | Break | | 4.00pm - 6.00pm | Buffer for overrun | Buffer for overrun | Buffer for overrun | # Programme Demo Day will be on 29 May 2024 at the MCI Atrium. ## Administrative Briefing {% hint style="info" %} Please refer to this link for the [administrative briefing slides](https://docs.google.com/presentation/d/18fffslHkB1uyIu1ImXbebf9fjO2CcO3d8bdXMQ5BUi0/edit#slide=id.g271f7525f6b_0_44) on Demo Day. {% endhint %} ## Programme
TimeProgrammeRemarks
9.30am to 10.30amReflections and Booth SetupMandatory for all TechUp 2.0 participants
10.30am to 11.30amGroup A boothsCheck groupings here
11.30am to 12.30pmGroup B boothsCheck groupings here
12.45pm to 1.30pmPrizes & Presentations of Winning Web Apps
1.30pm to 2.00pmClosing Ceremony
- Closing Remarks by PS
- Reflections by Yunxi
- Group Phototaking
2.00pmEnd
*Lunch is available from 11.45am to 2.00pm.* # Admin Instructions ## Administrative Briefing {% hint style="info" %} Please refer to this link for the [administrative briefing slides](https://docs.google.com/presentation/d/18fffslHkB1uyIu1ImXbebf9fjO2CcO3d8bdXMQ5BUi0/edit#slide=id.g271f7525f6b_0_44) on Demo Day. {% endhint %} # Booths Layout Please see slides 2 and 3 to check whether you are in Group A or B. {% embed url="" %}